Google Git
Sign in
apache / echarts-handbook / refs/heads/gh-pages / . / docs / zh / concepts / dataset / index.html
blob: da14bca613ec6900335c06f5cb247cf6f97f016d [file] [log] [blame]
<!doctype html>
<html data-n-head-ssr lang="zh-CN" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22zh-CN%22%7D%7D">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>数据集 - 概念篇 - 使用手册 - Apache ECharts</title><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="shortcut icon" type="image/png" href="https://echarts.apache.org/zh/images/favicon.png"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/zh/js/vendors/bootstrap@3.3.7/css/bootstrap.min.css"><link data-n-head="ssr" rel="stylesheet" href="https://echarts.apache.org/zh/css/main.css"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/zh/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"><script data-n-head="ssr">window.ECHARTS_WWW_VENDORS_CDN_ROOT="//echarts.apache.org/zh/js/vendors/"</script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/jquery@3.7.1/dist/jquery.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/bootstrap@3.3.7/js/bootstrap.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.js"></script><link rel="preload" href="/echarts-handbook/_nuxt/73c8e4b.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/ee8e7fb.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/6b95e13.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/58025dad1462d49b8398.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/0c5ed63.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/e97de2cdc6b7785ece0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/echarts-handbook/_nuxt/js/8cbc28eba39ffdac2c44.js" as="script"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/ee8e7fb.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/6b95e13.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/0c5ed63.css"><link rel="stylesheet" href="/echarts-handbook/_nuxt/css/3556c50.css">
</head>
<body>
<div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20240226" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v6-upgrade-guide">v6 升级指南</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://github.com/apache/echarts-custom-series" 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://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><li id="nav-github"><a href="https://github.com/apache/echarts" target="_blank"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#333"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg></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="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/echarts-handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/echarts-handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v6-feature" class="nav-link"><span class="title">ECharts 6 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v6-upgrade-guide" class="nav-link"><span class="title">v5 升级 v6 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">5.0</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-5-0" class="nav-link"><span class="title">5.5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/basics/release-note/5-6-0" class="nav-link"><span class="title">5.6</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/echarts-handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/echarts-handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">常用组件</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">地理坐标系（Geo）</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/component-types/geo/svg-base-map" class="nav-link"><span class="title">SVG 底图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">动画</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/echarts-handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/echarts-handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/echarts-handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/echarts-handbook/zh/best-practices/security" class="nav-link"><span class="title">安全指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/echarts-handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h1> <p><code>数据集（dataset）</code>是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。</p> <h2 id="%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在系列中设置数据</h2> <p>如果数据设置在 <code>系列（series）</code> 中，例如：</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
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>
<span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><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>
<span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><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>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'2016'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><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>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'2017'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><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>这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。
但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p> <h2 id="%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" tabindex="-1">在数据集中设置数据</h2> <p>而数据设置在 <code>数据集（dataset）</code> 中，会有这些好处：</p> <ul><li>能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。</li> <li>数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。</li> <li>数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。</li> <li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li></ul> <p>下面是一个最简单的 <code>dataset</code> 的例子：</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
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]
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
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>
<span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 提供一份数据。</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'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">// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。</span>
<span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 声明一个 Y 轴，数值轴。</span>
<span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'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>或者也可以使用常见的“对象数组”的格式：</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: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
// 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
// 完成映射，参见后文。
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>
<span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，</span>
<span class="token comment">// 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。</span>
<span class="token comment">// 如果不指定 dimensions，也可以通过指定 series.encode</span>
<span class="token comment">// 完成映射，参见后文。</span>
<span class="token literal-property property">dimensions</span><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>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> <span class="token literal-property property">product</span><span class="token operator">:</span> <span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string-property property">'2015'</span><span class="token operator">:</span> <span class="token number">43.3</span><span class="token punctuation">,</span> <span class="token string-property property">'2016'</span><span class="token operator">:</span> <span class="token number">85.8</span><span class="token punctuation">,</span> <span class="token string-property property">'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> <span class="token literal-property property">product</span><span class="token operator">:</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string-property property">'2015'</span><span class="token operator">:</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token string-property property">'2016'</span><span class="token operator">:</span> <span class="token number">73.4</span><span class="token punctuation">,</span> <span class="token string-property property">'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> <span class="token literal-property property">product</span><span class="token operator">:</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string-property property">'2015'</span><span class="token operator">:</span> <span class="token number">86.4</span><span class="token punctuation">,</span> <span class="token string-property property">'2016'</span><span class="token operator">:</span> <span class="token number">65.2</span><span class="token punctuation">,</span> <span class="token string-property property">'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> <span class="token literal-property property">product</span><span class="token operator">:</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> <span class="token string-property property">'2015'</span><span class="token operator">:</span> <span class="token number">72.4</span><span class="token punctuation">,</span> <span class="token string-property property">'2016'</span><span class="token operator">:</span> <span class="token number">53.9</span><span class="token punctuation">,</span> <span class="token string-property property">'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>
<span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">type</span><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 literal-property property">type</span><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 literal-property property">type</span><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="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">数据到图形的映射</h2> <p>如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。</p> <p>简而言之，可以进行这些映射的设定：</p> <ul><li>指定 <code>数据集</code> 的列（column）还是行（row）映射为 <code>系列（series）</code>。这件事可以使用 <a href="https://echarts.apache.org/option.html#series.seriesLayoutBy">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li> <li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href="https://echarts.apache.org/option.html#series.encode">series.encode</a> 属性，以及 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 组件来配置（如果有需要映射颜色大小等视觉维度的话）。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 <code>dataset.source</code> 中的第一列；三个柱图系列，一一对应到 <code>dataset.source</code> 中后面每一列。</li></ul> <p>下面详细解释这些映射的设定。</p> <h2 id="%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88dataset%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" tabindex="-1">把数据集（dataset）的行或列映射为系列（series）</h2> <p>有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。</p> <p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p> <ul><li><code>'column'</code>: 默认值。系列被安放到 <code>dataset</code> 的列上面。</li> <li><code>'row'</code>: 系列被安放到 <code>dataset</code> 的行上面。</li></ul> <p>看这个例子：</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: [
// 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。
{ type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
{ type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
{ type: 'bar', seriesLayoutBy: 'row', xAxisIndex: 0, yAxisIndex: 0 },
// 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。
{ type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
{ type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
{ type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 },
{ type: 'bar', seriesLayoutBy: 'column', xAxisIndex: 1, yAxisIndex: 1 }
]
};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'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>
<span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> <span class="token literal-property property">gridIndex</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> <span class="token literal-property property">gridIndex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">gridIndex</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">gridIndex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">bottom</span><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> <span class="token literal-property property">top</span><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>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token comment">// 这几个系列会出现在第一个直角坐标系中，每个系列对应到 dataset 的每一行。</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">seriesLayoutBy</span><span class="token operator">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">seriesLayoutBy</span><span class="token operator">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">seriesLayoutBy</span><span class="token operator">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span> <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">seriesLayoutBy</span><span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span> <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">seriesLayoutBy</span><span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span> <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">seriesLayoutBy</span><span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span> <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">seriesLayoutBy</span><span class="token operator">:</span> <span class="token string">'column'</span><span class="token punctuation">,</span> <span class="token literal-property property">xAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">yAxisIndex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><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="%E7%BB%B4%E5%BA%A6%EF%BC%88dimension%EF%BC%89" tabindex="-1">维度（dimension）</h2> <p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p> <p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如下面的<a href="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%88series.encode%EF%BC%89">例子</a>中，<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="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>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">dimensions</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> <span class="token literal-property property">name</span><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">// 可以简写为 string ，表示 dimension name 。</span>
<span class="token string">'amount'</span><span class="token punctuation">,</span>
<span class="token comment">// 可以在 type 中指定维度类型。</span>
<span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><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 literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token comment">//...</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token 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>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token comment">// ...</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
<span class="token comment">// series.dimensions 会更优先于 dataset.dimension 采纳。</span>
<span class="token literal-property property">dimensions</span><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">// 可以设置为 null 表示不想设置维度名</span>
<span class="token string">'amount'</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><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>大多数情况下，我们并不需要去设置维度类型，因为 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">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html#series.data">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="%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%88series.encode%EF%BC%89" tabindex="-1">数据到图形的映射（series.encode）</h2> <p>了解了维度的概念后，我们就可以使用 <a href="https://echarts.apache.org/option.html#series.encode">series.encode</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: [
['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: {
// 将 "amount" 列映射到 X 轴。
x: 'amount',
// 将 "product" 列映射到 Y 轴。
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>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token string">'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>
<span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 将 "amount" 列映射到 X 轴。</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token string">'amount'</span><span class="token punctuation">,</span>
<span class="token comment">// 将 "product" 列映射到 Y 轴。</span>
<span class="token literal-property property">y</span><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><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="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 在任何坐标系和系列中，都支持：</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示</span>
<span class="token literal-property property">tooltip</span><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">// 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）</span>
<span class="token literal-property property">seriesName</span><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">// 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。</span>
<span class="token literal-property property">itemId</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token comment">// 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。</span>
<span class="token literal-property property">itemName</span><span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>
<span class="token comment">// 直角坐标系（grid/cartesian）特有的属性：</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：</span>
<span class="token literal-property property">x</span><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">// 把“维度0”映射到 Y 轴。</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">0</span>
<span class="token punctuation">}</span>
<span class="token comment">// 单轴（singleAxis）特有的属性：</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">single</span><span class="token operator">:</span> <span class="token number">3</span>
<span class="token punctuation">}</span>
<span class="token comment">// 极坐标系（polar）特有的属性：</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">radius</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token literal-property property">angle</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token comment">// 地理坐标系（geo）特有的属性：</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">lng</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token literal-property property">lat</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>
<span class="token comment">// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">value</span><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>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1">示例</a> 。</p> <h2 id="%E9%BB%98%E8%AE%A4%E7%9A%84-series.encode" tabindex="-1">默认的 series.encode</h2> <p>值得一提的是，当 <code>series.encode</code> 并没有指定时，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K 线图等）、饼图、漏斗图，会采用一些默认的映射规则。默认的映射规则比较简单，大体是：</p> <ul><li>在坐标系中（如直角坐标系、极坐标系等）
<ul><li>如果有类目轴（<a href="https://echarts.apache.org/option.html#xAxis.type">axis.type</a> 为 <code>'category'</code>），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</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">例子</a>。</p> <h2 id="%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-series.encode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" tabindex="-1">几个常见的 series.encode 设置方式举例</h2> <p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p> <p>答：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><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>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p> <p>答：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">seriesLayoutBy</span><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>问：如何把第二列设置为标签？</p> <p>答：
关于标签的显示 <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><span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// `'{@score}'` 表示 “名为 score” 的维度里的值。</span>
<span class="token comment">// `'{@[4]}'` 表示引用序号为 4 的维度里的值。</span>
<span class="token literal-property property">formatter</span><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>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p> <p>答：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">encode</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">tooltip</span><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>问：数据里没有维度名，那么怎么给出维度名？</p> <p>答：</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>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">dimensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'amount'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token 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>问：如何把第三列映射为气泡图的点的大小？</p> <p>答：</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, // 指向第三列（列序号从 0 开始记，所以设置为 2）。
min: 2, // 需要给出数值范围，最小数值。
max: 15, // 需要给出数值范围，最大数值。
inRange: {
// 气泡尺寸：5 像素到 60 像素。
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>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">[</span><span class="token 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>
<span class="token literal-property property">visualMap</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">dimension</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 指向第三列（列序号从 0 开始记，所以设置为 2）。</span>
<span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 需要给出数值范围，最小数值。</span>
<span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token comment">// 需要给出数值范围，最大数值。</span>
<span class="token literal-property property">inRange</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">// 气泡尺寸：5 像素到 60 像素。</span>
<span class="token literal-property property">symbolSize</span><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>
<span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><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>问：encode 里指定了映射，但是不管用？</p> <p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p> <h2 id="%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" tabindex="-1">视觉通道（颜色、尺寸等）的映射</h2> <p>我们可以使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1">示例</a>。</p> <h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" tabindex="-1">数据的各种格式</h2> <p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p> <blockquote><p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse">PapaParse</a> 将 csv 转成 JSON。</p></blockquote> <p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p> <p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href="https://echarts.apache.org/option.html#series.seriesLayoutBy">seriesLayoutBy</a> 参数。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token comment">// 按行的 key-value 形式（对象数组），这是个比较常见的格式。</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> <span class="token literal-property property">product</span><span class="token operator">:</span> <span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">823</span><span class="token punctuation">,</span> <span class="token literal-property property">score</span><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> <span class="token literal-property property">product</span><span class="token operator">:</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token literal-property property">score</span><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> <span class="token literal-property property">product</span><span class="token operator">:</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1042</span><span class="token punctuation">,</span> <span class="token literal-property property">score</span><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> <span class="token literal-property property">product</span><span class="token operator">:</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">988</span><span class="token punctuation">,</span> <span class="token literal-property property">score</span><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">// 按列的 key-value 形式。</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">product</span><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 literal-property property">count</span><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>
<span class="token literal-property property">score</span><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="%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" tabindex="-1">多个 dataset 以及如何引用他们</h2> <p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html#series.datasetIndex">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</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>
<span class="token literal-property property">dataset</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token comment">// 序号为 0 的 dataset。</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token comment">// 序号为 1 的 dataset。</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token comment">// 序号为 2 的 dataset。</span>
<span class="token literal-property property">source</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token comment">// 使用序号为 2 的 dataset。</span>
<span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token comment">// 使用序号为 1 的 dataset。</span>
<span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token 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="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%88series.data%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" tabindex="-1">ECharts 3 的数据设置方式（series.data）仍正常使用</h2> <p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href="https://echarts.apache.org/option.html#series.data">series.data</a>， 那么就会使用 <a href="https://echarts.apache.org/option.html#series.data">series.data</a> 而非 <code>dataset</code>。</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
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>
<span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><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>
<span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><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>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'2016'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><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>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'2017'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><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>其实，<a href="https://echarts.apache.org/option.html#series.data">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href="https://echarts.apache.org/option.html#series-treemap">treemap</a>、<a href="https://echarts.apache.org/option.html#series-graph">graph</a>、<a href="https://echarts.apache.org/option.html#series-lines">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href="https://echarts.apache.org/option.html#series.data">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p> <h2 id="%E5%85%B6%E4%BB%96" tabindex="-1">其他</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">示例</a>，多个图表共享一个 <code>dataset</code>，并带有联动交互。</p></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/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/plainheart" target="_blank" class="post-contributor has-avatar"><img alt="plainheart" src="https://echarts.apache.org/en/images/people/plainheart.jpg" loading="lazy" decoding="async" fetchpriority="low"> <span>plainheart</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor has-avatar"><img alt="pissang" src="https://echarts.apache.org/en/images/people/沈毅.jpg?_v_=20240226" loading="lazy" decoding="async" fetchpriority="low"> <span>pissang</span></a><a href="https://github.com/100pah" target="_blank" class="post-contributor has-avatar"><img alt="100pah" src="https://echarts.apache.org/en/images/people/宿爽.jpg?_v_=20240226" loading="lazy" decoding="async" fetchpriority="low"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor has-avatar"><img alt="Ovilia" src="https://echarts.apache.org/en/images/people/羡辙.jpg?_v_=20240226" loading="lazy" decoding="async" fetchpriority="low"> <span>Ovilia</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(e,i,t,g,d,l,I,a,o,C,n,A,s,c,r,h,p,B,u,m,y,b,E,v,L,O,W,D,w,Z,J,j,X,M,H,Y,z,G,N,S,K,k,f,F,T,x,Q,R,V,U,q,P,_,$,ee,ie,te,ge,de,le,Ie,ae,oe){return{layout:"default",data:[{html:'<h1 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h1>\n<p><code>数据集（dataset）</code>是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。</p>\n<h2 id="%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在系列中设置数据</h2>\n<p>如果数据设置在 <code>系列（series）</code> 中，例如：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。\n但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<h2 id="%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" tabindex="-1">在数据集中设置数据</h2>\n<p>而数据设置在 <code>数据集（dataset）</code> 中，会有这些好处：</p>\n<ul>\n<li>能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。</li>\n<li>数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8g5o-Q5L6b5LiA5Lu95pWw5o2u44CCCiAgICBzb3VyY2U6IFsKICAgICAgWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDMuMywgODUuOCwgOTMuN10sCiAgICAgIFsnTWlsayBUZWEnLCA4My4xLCA3My40LCA1NS4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCA4Ni40LCA2NS4yLCA4Mi41XSwKICAgICAgWydXYWxudXQgQnJvd25pZScsIDcyLjQsIDUzLjksIDM5LjFdCiAgICBdCiAgfSwKICAvLyDlo7DmmI7kuIDkuKogWCDovbTvvIznsbvnm67ovbTvvIhjYXRlZ29yee-8ieOAgum7mOiupOaDheWGteS4i--8jOexu-ebrui9tOWvueW6lOWIsCBkYXRhc2V0IOesrOS4gOWIl-OAggogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICAvLyDlo7DmmI7kuIDkuKogWSDovbTvvIzmlbDlgLzovbTjgIIKICB5QXhpczoge30sCiAgLy8g5aOw5piO5aSa5LiqIGJhciDns7vliJfvvIzpu5jorqTmg4XlhrXkuIvvvIzmr4_kuKrns7vliJfkvJroh6rliqjlr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>或者也可以使用常见的“对象数组”的格式：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8g55SoIGRpbWVuc2lvbnMg5oyH5a6a5LqG57u05bqm55qE6aG65bqP44CC55u06KeS5Z2Q5qCH57O75Lit77yM5aaC5p6cIFgg6L20IHR5cGUg5Li6IGNhdGVnb3J577yMCiAgICAvLyDpu5jorqTmiornrKzkuIDkuKrnu7TluqbmmKDlsITliLAgWCDovbTkuIrvvIzlkI7pnaLnu7TluqbmmKDlsITliLAgWSDovbTkuIrjgIIKICAgIC8vIOWmguaenOS4jeaMh-WumiBkaW1lbnNpb25z77yM5Lmf5Y-v5Lul6YCa6L-H5oyH5a6aIHNlcmllcy5lbmNvZGUKICAgIC8vIOWujOaIkOaYoOWwhO-8jOWPguingeWQjuaWh-OAggogICAgZGltZW5zaW9uczogWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgJzIwMTUnOiA0My4zLCAnMjAxNic6IDg1LjgsICcyMDE3JzogOTMuNyB9LAogICAgICB7IHByb2R1Y3Q6ICdNaWxrIFRlYScsICcyMDE1JzogODMuMSwgJzIwMTYnOiA3My40LCAnMjAxNyc6IDU1LjEgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgJzIwMTUnOiA4Ni40LCAnMjAxNic6IDY1LjIsICcyMDE3JzogODIuNSB9LAogICAgICB7IHByb2R1Y3Q6ICdXYWxudXQgQnJvd25pZScsICcyMDE1JzogNzIuNCwgJzIwMTYnOiA1My45LCAnMjAxNyc6IDM5LjEgfQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">数据到图形的映射</h2>\n<p>如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。</p>\n<p>简而言之，可以进行这些映射的设定：</p>\n<ul>\n<li>指定 <code>数据集</code> 的列（column）还是行（row）映射为 <code>系列（series）</code>。这件事可以使用 <a href="https://echarts.apache.org/option.html#series.seriesLayoutBy">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>\n<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href="https://echarts.apache.org/option.html#series.encode">series.encode</a> 属性，以及 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 组件来配置（如果有需要映射颜色大小等视觉维度的话）。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 <code>dataset.source</code> 中的第一列；三个柱图系列，一一对应到 <code>dataset.source</code> 中后面每一列。</li>\n</ul>\n<p>下面详细解释这些映射的设定。</p>\n<h2 id="%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88dataset%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" tabindex="-1">把数据集（dataset）的行或列映射为系列（series）</h2>\n<p>有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li><code>\'column\'</code>: 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li><code>\'row\'</code>: 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDEyJywgJzIwMTMnLCAnMjAxNCcsICcyMDE1J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDEuMSwgMzAuNCwgNjUuMSwgNTMuM10sCiAgICAgIFsnTWlsayBUZWEnLCA4Ni41LCA5Mi4xLCA4NS43LCA4My4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCAyNC4xLCA2Ny4yLCA3OS41LCA4Ni40XQogICAgXQogIH0sCiAgeEF4aXM6IFsKICAgIHsgdHlwZTogJ2NhdGVnb3J5JywgZ3JpZEluZGV4OiAwIH0sCiAgICB7IHR5cGU6ICdjYXRlZ29yeScsIGdyaWRJbmRleDogMSB9CiAgXSwKICB5QXhpczogW3sgZ3JpZEluZGV4OiAwIH0sIHsgZ3JpZEluZGV4OiAxIH1dLAogIGdyaWQ6IFt7IGJvdHRvbTogJzU1JScgfSwgeyB0b3A6ICc1NSUnIH1dLAogIHNlcmllczogWwogICAgLy8g6L-Z5Yeg5Liq57O75YiX5Lya5Ye6546w5Zyo56ys5LiA5Liq55u06KeS5Z2Q5qCH57O75Lit77yM5q-P5Liq57O75YiX5a-55bqU5YiwIGRhdGFzZXQg55qE5q-P5LiA6KGM44CCCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycsIHhBeGlzSW5kZXg6IDAsIHlBeGlzSW5kZXg6IDAgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JywgeEF4aXNJbmRleDogMCwgeUF4aXNJbmRleDogMCB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnLCB4QXhpc0luZGV4OiAwLCB5QXhpc0luZGV4OiAwIH0sCiAgICAvLyDov5nlh6DkuKrns7vliJfkvJrlh7rnjrDlnKjnrKzkuozkuKrnm7Top5LlnZDmoIfns7vkuK3vvIzmr4_kuKrns7vliJflr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAnY29sdW1uJywgeEF4aXNJbmRleDogMSwgeUF4aXNJbmRleDogMSB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdjb2x1bW4nLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ2NvbHVtbicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAnY29sdW1uJywgeEF4aXNJbmRleDogMSwgeUF4aXNJbmRleDogMSB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="%E7%BB%B4%E5%BA%A6%EF%BC%88dimension%EF%BC%89" tabindex="-1">维度（dimension）</h2>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如下面的<a href="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%88series.encode%EF%BC%89">例子</a>中，<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>\n<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbjEgPSB7CiAgZGF0YXNldDogewogICAgZGltZW5zaW9uczogWwogICAgICB7IG5hbWU6ICdzY29yZScgfSwKICAgICAgLy8g5Y-v5Lul566A5YaZ5Li6IHN0cmluZyDvvIzooajnpLogZGltZW5zaW9uIG5hbWUg44CCCiAgICAgICdhbW91bnQnLAogICAgICAvLyDlj6_ku6XlnKggdHlwZSDkuK3mjIflrprnu7TluqbnsbvlnovjgIIKICAgICAgeyBuYW1lOiAncHJvZHVjdCcsIHR5cGU6ICdvcmRpbmFsJyB9CiAgICBdLAogICAgc291cmNlOiBbCiAgICAgIC8vLi4uCiAgICBdCiAgfQogIC8vIC4uLgp9OwoKdmFyIG9wdGlvbjIgPSB7CiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIC8vIC4uLgogICAgXQogIH0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnbGluZScsCiAgICAvLyBzZXJpZXMuZGltZW5zaW9ucyDkvJrmm7TkvJjlhYjkuo4gZGF0YXNldC5kaW1lbnNpb24g6YeH57qz44CCCiAgICBkaW1lbnNpb25zOiBbCiAgICAgIG51bGwsIC8vIOWPr-S7peiuvue9ruS4uiBudWxsIOihqOekuuS4jeaDs-iuvue9rue7tOW6puWQjQogICAgICAnYW1vdW50JywKICAgICAgeyBuYW1lOiAncHJvZHVjdCcsIHR5cGU6ICdvcmRpbmFsJyB9CiAgICBdCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>大多数情况下，我们并不需要去设置维度类型，因为 ECharts 会自动尝试判断。但是如果不足够准确时，可以手动设置维度类型。</p>\n<p>维度类型（dimension type）可以取这些值：</p>\n<ul>\n<li><code>\'number\'</code>: 默认，表示普通数据。</li>\n<li><code>\'ordinal\'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 \'ordinal\' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确，所以使用者也可以手动强制指定。</li>\n<li><code>\'time\'</code>: 表示时间数据。设置成 <code>\'time\'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 \'2017-05-10\'，会自动被解析。如果这个维度被用在时间数轴（<a href="https://echarts.apache.org/option.html#xAxis.type">axis.type</a> 为 <code>\'time\'</code>）上，那么会被自动设置为 <code>\'time\'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html#series.data">data</a>。</li>\n<li><code>\'float\'</code>: 如果设置成 <code>\'float\'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n<li><code>\'int\'</code>: 如果设置成 <code>\'int\'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<h2 id="%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%88series.encode%EF%BC%89" tabindex="-1">数据到图形的映射（series.encode）</h2>\n<p>了解了维度的概念后，我们就可以使用 <a href="https://echarts.apache.org/option.html#series.encode">series.encode</a> 来做映射。总体是这样的感觉：</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWydzY29yZScsICdhbW91bnQnLCAncHJvZHVjdCddLAogICAgICBbODkuMywgNTgyMTIsICdNYXRjaGEgTGF0dGUnXSwKICAgICAgWzU3LjEsIDc4MjU0LCAnTWlsayBUZWEnXSwKICAgICAgWzc0LjQsIDQxMDMyLCAnQ2hlZXNlIENvY29hJ10sCiAgICAgIFs1MC4xLCAxMjc1NSwgJ0NoZWVzZSBCcm93bmllJ10sCiAgICAgIFs4OS43LCAyMDE0NSwgJ01hdGNoYSBDb2NvYSddLAogICAgICBbNjguMSwgNzkxNDYsICdUZWEnXSwKICAgICAgWzE5LjYsIDkxODUyLCAnT3JhbmdlIEp1aWNlJ10sCiAgICAgIFsxMC42LCAxMDE4NTIsICdMZW1vbiBKdWljZSddLAogICAgICBbMzIuNywgMjAxMTIsICdXYWxudXQgQnJvd25pZSddCiAgICBdCiAgfSwKICB4QXhpczoge30sCiAgeUF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZW5jb2RlOiB7CiAgICAgICAgLy8g5bCGICJhbW91bnQiIOWIl-aYoOWwhOWIsCBYIOi9tOOAggogICAgICAgIHg6ICdhbW91bnQnLAogICAgICAgIC8vIOWwhiAicHJvZHVjdCIg5YiX5pig5bCE5YiwIFkg6L2044CCCiAgICAgICAgeTogJ3Byb2R1Y3QnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p><code>series.encode</code> 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称，如 <code>\'x\'</code>, <code>\'y\'</code>, <code>\'tooltip\'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 <code>series.encode</code> 支持的属性：</p>\n<md-code-block lang="js" code="\'Ly8g5Zyo5Lu75L2V5Z2Q5qCH57O75ZKM57O75YiX5Lit77yM6YO95pSv5oyB77yaCmVuY29kZTogewogIC8vIOS9v-eUqCDigJzlkI3kuLogcHJvZHVjdCDnmoTnu7TluqbigJ0g5ZKMIOKAnOWQjeS4uiBzY29yZSDnmoTnu7TluqbigJ0g55qE5YC85ZyoIHRvb2x0aXAg5Lit5pi-56S6CiAgdG9vbHRpcDogWydwcm9kdWN0JywgJ3Njb3JlJ10KICAvLyDkvb_nlKgg4oCc57u05bqmIDHigJ0g5ZKMIOKAnOe7tOW6piAz4oCdIOeahOe7tOW6puWQjei_nui1t-adpeS9nOS4uuezu-WIl-WQjeOAgu-8iOacieaXtuWAmeWQjeWtl-avlOi-g-mVv--8jOi_meWPr-S7pemBv-WFjeWcqCBzZXJpZXMubmFtZSDph43lpI3ovpPlhaXov5nkupvlkI3lrZfvvIkKICBzZXJpZXNOYW1lOiBbMSwgM10sCiAgLy8g6KGo56S65L2_55SoIOKAnOe7tOW6pjLigJ0g5Lit55qE5YC85L2c5Li6IGlk44CC6L-Z5Zyo5L2_55SoIHNldE9wdGlvbiDliqjmgIHmm7TmlrDmlbDmja7ml7bmnInnlKjlpITvvIzlj6_ku6Xkvb_mlrDogIHmlbDmja7nlKggaWQg5a-55bqU6LW35p2l77yM5LuO6ICM6IO95aSf5Lqn55Sf5ZCI6YCC55qE5pWw5o2u5pu05paw5Yqo55S744CCCiAgaXRlbUlkOiAyLAogIC8vIOaMh-WumuaVsOaNrumhueeahOWQjeensOS9v-eUqCDigJznu7TluqYz4oCdIOWcqOmlvOWbvuetieWbvuihqOS4reacieeUqO-8jOWPr-S7peS9v-i_meS4quWQjeWtl-aYvuekuuWcqOWbvuS-i--8iGxlZ2VuZO-8ieS4reOAggogIGl0ZW1OYW1lOiAzCn0KCi8vIOebtOinkuWdkOagh-ezu--8iGdyaWQvY2FydGVzaWFu77yJ54m55pyJ55qE5bGe5oCn77yaCmVuY29kZTogewogIC8vIOaKiiDigJznu7TluqYx4oCd44CB4oCc57u05bqmNeKAneOAgeKAnOWQjeS4uiBzY29yZSDnmoTnu7TluqbigJ0g5pig5bCE5YiwIFgg6L2077yaCiAgeDogWzEsIDUsICdzY29yZSddLAogIC8vIOaKiuKAnOe7tOW6pjDigJ3mmKDlsITliLAgWSDovbTjgIIKICB5OiAwCn0KCi8vIOWNlei9tO-8iHNpbmdsZUF4aXPvvInnibnmnInnmoTlsZ7mgKfvvJoKZW5jb2RlOiB7CiAgc2luZ2xlOiAzCn0KCi8vIOaegeWdkOagh-ezu--8iHBvbGFy77yJ54m55pyJ55qE5bGe5oCn77yaCmVuY29kZTogewogIHJhZGl1czogMywKICBhbmdsZTogMgp9CgovLyDlnLDnkIblnZDmoIfns7vvvIhnZW_vvInnibnmnInnmoTlsZ7mgKfvvJoKZW5jb2RlOiB7CiAgbG5nOiAzLAogIGxhdDogMgp9CgovLyDlr7nkuo7kuIDkupvmsqHmnInlnZDmoIfns7vnmoTlm77ooajvvIzkvovlpoLppbzlm77jgIHmvI_mlpflm77nrYnvvIzlj6_ku6XmmK_vvJoKZW5jb2RlOiB7CiAgdmFsdWU6IDMKfQ\'" line-highlights="\'\'" />\n<p>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&amp;edit=1&amp;reset=1">示例</a> 。</p>\n<h2 id="%E9%BB%98%E8%AE%A4%E7%9A%84-series.encode" tabindex="-1">默认的 series.encode</h2>\n<p>值得一提的是，当 <code>series.encode</code> 并没有指定时，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K 线图等）、饼图、漏斗图，会采用一些默认的映射规则。默认的映射规则比较简单，大体是：</p>\n<ul>\n<li>在坐标系中（如直角坐标系、极坐标系等）\n<ul>\n<li>如果有类目轴（<a href="https://echarts.apache.org/option.html#xAxis.type">axis.type</a> 为 <code>\'category\'</code>），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>\n<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系（如饼图）\n<ul>\n<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&amp;edit=1&amp;reset=1">例子</a>。</p>\n<h2 id="%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-series.encode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" tabindex="-1">几个常见的 series.encode 设置方式举例</h2>\n<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>\n<p>答：</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgLy8g5rOo5oSP57u05bqm5bqP5Y-377yIZGltZW5zaW9uSW5kZXjvvInku44gMCDlvIDlp4vorqHmlbDvvIznrKzkuInliJfmmK8gZGltZW5zaW9uc1syXeOAggogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfQogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>\n<p>答：</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfSwKICAgIHNlcmllc0xheW91dEJ5OiAncm93JwogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问：如何把第二列设置为标签？</p>\n<p>答：\n关于标签的显示 <a href="https://echarts.apache.org/option.html#series.label.formatter">label.formatter</a>，现在支持引用特定维度的值，例如：</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgbGFiZWw6IHsKICAgIC8vIGAne0BzY29yZX0nYCDooajnpLog4oCc5ZCN5Li6IHNjb3Jl4oCdIOeahOe7tOW6pumHjOeahOWAvOOAggogICAgLy8gYCd7QFs0XX0nYCDooajnpLrlvJXnlKjluo_lj7fkuLogNCDnmoTnu7Tluqbph4znmoTlgLzjgIIKICAgIGZvcm1hdHRlcjogJ2FhYXtAcHJvZHVjdH1iYmJ7QHNjb3JlfWNjY3tAWzRdfWRkZCc7CiAgfQp9\'" line-highlights="\'\'" />\n<p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>\n<p>答：</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7CiAgICAgIHRvb2x0aXA6IFsxLCAyXQogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>问：数据里没有维度名，那么怎么给出维度名？</p>\n<p>答：</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBkaW1lbnNpb25zOiBbJ3Njb3JlJywgJ2Ftb3VudCddLAogICAgc291cmNlOiBbCiAgICAgIFs4OS4zLCAzMzcxXSwKICAgICAgWzkyLjEsIDgxMjNdLAogICAgICBbOTQuNCwgMTk1NF0sCiAgICAgIFs4NS40LCA4MjldCiAgICBdCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问：如何把第三列映射为气泡图的点的大小？</p>\n<p>答：</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWzEyLCAzMjMsIDExLjJdLAogICAgICBbMjMsIDE2NywgOC4zXSwKICAgICAgWzgxLCAyODQsIDEyXSwKICAgICAgWzkxLCA0MTMsIDQuMV0sCiAgICAgIFsxMywgMjg3LCAxMy41XQogICAgXQogIH0sCiAgdmlzdWFsTWFwOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIGRpbWVuc2lvbjogMiwgLy8g5oyH5ZCR56ys5LiJ5YiX77yI5YiX5bqP5Y-35LuOIDAg5byA5aeL6K6w77yM5omA5Lul6K6-572u5Li6IDLvvInjgIIKICAgIG1pbjogMiwgLy8g6ZyA6KaB57uZ5Ye65pWw5YC86IyD5Zu077yM5pyA5bCP5pWw5YC844CCCiAgICBtYXg6IDE1LCAvLyDpnIDopoHnu5nlh7rmlbDlgLzojIPlm7TvvIzmnIDlpKfmlbDlgLzjgIIKICAgIGluUmFuZ2U6IHsKICAgICAgLy8g5rCU5rOh5bC65a-477yaNSDlg4_ntKDliLAgNjAg5YOP57Sg44CCCiAgICAgIHN5bWJvbFNpemU6IFs1LCA2MF0KICAgIH0KICB9LAogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnc2NhdHRlcicKICB9Cn07\'" v-bind="{}" />\n<p>问：encode 里指定了映射，但是不管用？</p>\n<p>答：可以查查有没有拼错，比如，维度名是：<code>\'Life Expectancy\'</code>，encode 中拼成了 <code>\'Life Expectency\'</code>。</p>\n<h2 id="%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" tabindex="-1">视觉通道（颜色、尺寸等）的映射</h2>\n<p>我们可以使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&amp;edit=1&amp;reset=1">示例</a>。</p>\n<h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" tabindex="-1">数据的各种格式</h2>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href="https://echarts.apache.org/option.html#series.seriesLayoutBy">seriesLayoutBy</a> 参数。</p>\n<md-code-block lang="js" code="\'ZGF0YXNldDogWwogIHsKICAgIC8vIOaMieihjOeahCBrZXktdmFsdWUg5b2i5byP77yI5a-56LGh5pWw57uE77yJ77yM6L-Z5piv5Liq5q-U6L6D5bi46KeB55qE5qC85byP44CCCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgY291bnQ6IDgyMywgc2NvcmU6IDk1LjggfSwKICAgICAgeyBwcm9kdWN0OiAnTWlsayBUZWEnLCBjb3VudDogMjM1LCBzY29yZTogODEuNCB9LAogICAgICB7IHByb2R1Y3Q6ICdDaGVlc2UgQ29jb2EnLCBjb3VudDogMTA0Miwgc2NvcmU6IDkxLjIgfSwKICAgICAgeyBwcm9kdWN0OiAnV2FsbnV0IEJyb3duaWUnLCBjb3VudDogOTg4LCBzY29yZTogNzYuOSB9CiAgICBdCiAgfSwKICB7CiAgICAvLyDmjInliJfnmoQga2V5LXZhbHVlIOW9ouW8j-OAggogICAgc291cmNlOiB7CiAgICAgIHByb2R1Y3Q6IFsnTWF0Y2hhIExhdHRlJywgJ01pbGsgVGVhJywgJ0NoZWVzZSBDb2NvYScsICdXYWxudXQgQnJvd25pZSddLAogICAgICBjb3VudDogWzgyMywgMjM1LCAxMDQyLCA5ODhdLAogICAgICBzY29yZTogWzk1LjgsIDgxLjQsIDkxLjIsIDc2LjldCiAgICB9CiAgfQpdOw\'" line-highlights="\'\'" />\n<h2 id="%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" tabindex="-1">多个 dataset 以及如何引用他们</h2>\n<p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html#series.datasetIndex">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAwIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAxIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAyIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICAvLyDkvb_nlKjluo_lj7fkuLogMiDnmoQgZGF0YXNldOOAggogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0sCiAgICB7CiAgICAgIC8vIOS9v-eUqOW6j-WPt-S4uiAxIOeahCBkYXRhc2V044CCCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h2 id="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%88series.data%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" tabindex="-1">ECharts 3 的数据设置方式（series.data）仍正常使用</h2>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href="https://echarts.apache.org/option.html#series.data">series.data</a>， 那么就会使用 <a href="https://echarts.apache.org/option.html#series.data">series.data</a> 而非 <code>dataset</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>其实，<a href="https://echarts.apache.org/option.html#series.data">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href="https://echarts.apache.org/option.html#series-treemap">treemap</a>、<a href="https://echarts.apache.org/option.html#series-graph">graph</a>、<a href="https://echarts.apache.org/option.html#series-lines">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href="https://echarts.apache.org/option.html#series.data">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载，这种情况不支持使用 <code>dataset</code>。</p>\n<h2 id="%E5%85%B6%E4%BB%96" tabindex="-1">其他</h2>\n<p>目前并非所有图表都支持 dataset。支持 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>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&amp;edit=1&amp;reset=1">示例</a>，多个图表共享一个 <code>dataset</code>，并带有联动交互。</p>\n',postPath:"zh/concepts/dataset",title:"数据集 - 概念篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:I},{title:"资源列表",dir:a,draft:e},{title:"寻求帮助",dir:o},{title:"版本特性",dir:C,children:[{title:"ECharts 6 特性介绍",dir:n},{title:"v5 升级 v6 指南",dir:A},{title:"5.0",dir:s},{title:"v4 升级 v5 指南",dir:c},{title:5.2,dir:r},{title:5.3,dir:h},{title:5.4,dir:p},{title:5.5,dir:B},{title:5.6,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:y},{title:"配置项",dir:b,draft:e},{title:"系列",dir:E,draft:e},{title:"样式",dir:v},{title:"数据集",dir:L},{title:"数据转换",dir:O},{title:"坐标系",dir:W,draft:e},{title:"坐标轴",dir:D},{title:"视觉映射",dir:t},{title:"图例",dir:w},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:j,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:M},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:Y,draft:e},{title:"阶梯瀑布图",dir:z},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:K},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:f}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:T},{title:"南丁格尔图（玫瑰图）",dir:"rose"}]},{title:"散点图",dir:x,children:[{title:"基础散点图",dir:Q}]}]},{title:"常用组件",dir:R,children:[{title:"地理坐标系（Geo）",dir:"geo",children:[{title:"SVG 底图",dir:V}]}]},{title:"移动端优化",dir:i,draft:e},{title:"跨平台方案",dir:U,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:P,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"动画",dir:$,children:[{title:"数据过渡动画",dir:ee}]},{title:"交互",dir:ie,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:te,draft:e},{title:"智能指针吸附",dir:ge}]}]},{title:"最佳实践",dir:de,children:[{title:"移动端优化",dir:i,draft:e},{title:le,dir:Ie},{title:"无障碍访问",dir:"aria"},{title:"安全指南",dir:ae}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:oe}]}],en:[{title:"Get Started",dir:g},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:I},{title:"Resources",dir:a,draft:e},{title:"Get Help",dir:o},{title:"What's New",dir:C,children:[{title:"ECharts 6 Features",dir:n},{title:"Migration from v5 to v6",dir:A},{title:"5.0",dir:s},{title:"Migration from v4 to v5",dir:c},{title:5.2,dir:r},{title:5.3,dir:h},{title:5.4,dir:p},{title:5.5,dir:B},{title:5.6,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:y},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:E,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:L},{title:"Data Transform",dir:O},{title:"Coordinate",dir:W,draft:e},{title:"Axis",dir:D},{title:"Visual Mapping",dir:t},{title:"Legend",dir:w},{title:"Event and Action",dir:Z}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:j,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:M},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:Y,draft:e},{title:"Waterfall",dir:z}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:K},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:f}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:T},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:x,children:[{title:"Basic Scatter",dir:Q}]}]},{title:"Common Components",dir:R,children:[{title:"Geo",dir:"geo",children:[{title:"SVG Base Map",dir:V}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:P,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Animation",dir:$,children:[{title:"Data Transition",dir:ee}]},{title:"Interaction",dir:ie,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:te,draft:e},{title:"Intelligent Pointer Snapping",dir:ge}]}]},{title:"Best Practices",dir:de,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:le,dir:Ie},{title:"Aria",dir:"aria"},{title:"Security Guidelines",dir:ae}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:oe}]}]},config:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-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#",apiPath:"https://echarts.apache.org/api.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/zh/concepts/dataset",config:{_app:{basePath:"/echarts-handbook/",assetsPath:"/echarts-handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v6-feature","v6-upgrade-guide","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","5-5-0","5-6-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","scatter","basic-scatter","component-types","svg-base-map","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","security","edit-guide")</script><script src="/echarts-handbook/_nuxt/73c8e4b.js" defer></script><script src="/echarts-handbook/_nuxt/js/e97de2cdc6b7785ece0f.js" defer></script><script src="/echarts-handbook/_nuxt/js/8cbc28eba39ffdac2c44.js" defer></script><script src="/echarts-handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/echarts-handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/echarts-handbook/_nuxt/js/58025dad1462d49b8398.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript>
<script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
</body>
</html>