| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>数据集 - 概念篇 - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/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/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/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="/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="/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="/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="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/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="/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="/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="/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></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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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 href="/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="/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="/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="/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="/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="/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="/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="/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="/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="/handbook/zh/best-practices/aria" 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="/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' }, |
| { type: 'bar', seriesLayoutBy: 'row' }, |
| { type: 'bar', seriesLayoutBy: 'row' }, |
| // 这几个系列会出现在第二个直角坐标系中，每个系列对应到 dataset 的每一列。 |
| { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, |
| { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, |
| { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }, |
| { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <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 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 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 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">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">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">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">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 的第一行（或者第一列）。例如上面的例子中，<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/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60" loading="lazy"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60" loading="lazy"> <span>Ovilia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,g,t,d,I,l,a,o,C,n,A,s,c,r,h,p,B,u,m,y,b,E,L,v,W,O,D,w,Z,J,j,H,z,Y,M,X,S,G,K,k,N,f,T,F,x,Q,R,V,U,q,P,_,$,ee,ie,ge,te){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-P5LiA6KGM44CCCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JyB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnIH0sCiAgICAvLyDov5nlh6DkuKrns7vliJfkvJrlh7rnjrDlnKjnrKzkuozkuKrnm7Top5LlnZDmoIfns7vkuK3vvIzmr4_kuKrns7vliJflr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfQogIF0KfTs\'" 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 的第一行（或者第一列）。例如上面的例子中，<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&edit=1&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&edit=1&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&edit=1&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&edit=1&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:t},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:I},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:a,draft:e},{title:"寻求帮助",dir:o},{title:"版本特性",dir:C,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"v4 升级 v5 指南",dir:A},{title:5.2,dir:s},{title:5.3,dir:c},{title:5.4,dir:r}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:m},{title:"数据集",dir:y},{title:"数据转换",dir:b},{title:"坐标系",dir:E,draft:e},{title:"坐标轴",dir:L},{title:"视觉映射",dir:g},{title:"图例",dir:v},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:O,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:w},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:J},{title:"极坐标系柱状图",dir:j,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:g,draft:e}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:G}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:k},{title:"南丁格尔图（玫瑰图）",dir:N}]},{title:"散点图",dir:f,children:[{title:"基础散点图",dir:T}]}]},{title:F,dir:i,draft:e},{title:"跨平台方案",dir:x,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:R,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:V}]},{title:"动画",dir:U,children:[{title:"数据过渡动画",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:ee,children:[{title:F,dir:i,draft:e},{title:ie,dir:ge},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:t},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:I},{title:"Import ECharts",dir:l},{title:"Resources",dir:a,draft:e},{title:"Get Help",dir:o},{title:"What's New",dir:C,children:[{title:"ECharts 5 Features",dir:n},{title:"Migration from v4 to v5",dir:A},{title:5.2,dir:s},{title:5.3,dir:c},{title:5.4,dir:r}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:y},{title:"Data Transform",dir:b},{title:"Coordinate",dir:E,draft:e},{title:"Axis",dir:L},{title:"Visual Mapping",dir:g},{title:"Legend",dir:v},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:O,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:w},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:J},{title:"Bar Polar",dir:j,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:G}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:k},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:f,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:x,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:R,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:V}]},{title:"Animation",dir:U,children:[{title:"Data Transition",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:ee,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ie,dir:ge},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/zh/concepts/dataset",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
