关于 ECharts4 新增的数据集（dataset）
ECharts 4 開(kāi)始有了 `數(shù)據(jù)集`（`dataset`）組件來(lái)單獨(dú)聲明數(shù)據(jù)，大概長(zhǎng)這個(gè)樣子：
這個(gè)最簡(jiǎn)單的例子，得到的效果是這樣的：
數(shù)據(jù)集帶來(lái)的好處是：
- 有了 `dataset` 后，能夠貼近這樣的數(shù)據(jù)可視化常見(jiàn)思維方式：基于數(shù)據(jù)（`dataset` 組件來(lái)提供數(shù)據(jù)），指定數(shù)據(jù)到視覺(jué)的映射（由 `encode` 屬性來(lái)指定映射），形成圖表。
- 數(shù)據(jù)和其他配置可以被分離開(kāi)來(lái)，使用者相對(duì)便于進(jìn)行單獨(dú)管理，也省去了一些數(shù)據(jù)處理的步驟。
- 數(shù)據(jù)可以被多個(gè)系列或者組件復(fù)用，對(duì)于大數(shù)據(jù)，不必為每個(gè)系列創(chuàng)建一份。
- 支持更多的數(shù)據(jù)的常用格式，例如二維數(shù)組、對(duì)象數(shù)組等，一定程度上避免使用者為了數(shù)據(jù)格式而進(jìn)行轉(zhuǎn)換。
數(shù)據(jù)到圖形的映射
本篇里，我們制作數(shù)據(jù)可視化圖表的邏輯是這樣的：基于數(shù)據(jù)，在配置項(xiàng)中指定如何映射到圖形。
概略而言，可以進(jìn)行這些映射：
- 指定 dataset 的列（column）還是行（row）映射為圖形系列（series）。這件事可以使用 `series.seriesLayoutBy` 屬性來(lái)配置。
- 指定 dataset 的哪些列（column）或行（row）對(duì)應(yīng)到坐標(biāo)軸（如 X、Y 軸）、提示框（tooltip）、標(biāo)簽（label）、圖形元素大小顏色等（visualMap）。這件事可以使用 `series.encode` 屬性來(lái)配置。如果有需要映射顏色大小等視覺(jué)維度，可以使用 visualMap 組件。
按行還是按列做映射
有了數(shù)據(jù)表之后，使用者可以靈活得配置：數(shù)據(jù)如何對(duì)應(yīng)到軸和圖形系列。上面的例子中，沒(méi)有給出這種映射配置，那么ECharts 就按最常見(jiàn)的理解進(jìn)行默認(rèn)映射：
- X 坐標(biāo)軸聲明為類目軸，默認(rèn)情況下會(huì)自動(dòng)對(duì)應(yīng)到 dataset.source 中的第一列；
- 三個(gè)柱圖系列，一一對(duì)應(yīng)到 dataset.source 中后面每一列。
用戶可以使用 `seriesLayoutBy` 配置項(xiàng)，改變圖表對(duì)于行列的理解。`seriesLayoutBy` 可取值：
- 'column': 默認(rèn)值。系列被安放到 `dataset` 的列上面。
- 'row': 系列被安放到 `dataset` 的行上面。
效果是這樣的：
更重要的是，我們可以使用 `encode` 配置項(xiàng)來(lái)更細(xì)節(jié)得指定數(shù)據(jù)如何映射到圖形。總體是這樣的感覺(jué)：
維度（dimension）
介紹 `encode` 之前，首先要介紹“維度（dimension）”的概念。
常用圖表所描述的數(shù)據(jù)大部分是“二維表”結(jié)構(gòu)，上述的例子中，我們都使用二維數(shù)組來(lái)容納二維表。現(xiàn)在，當(dāng)我們把系列（series）對(duì)應(yīng)到“列”的時(shí)候，那么每一列就稱為一個(gè)“維度（dimension）”，而每一行稱為數(shù)據(jù)項(xiàng)（item）。反之，如果我們把系列（series）對(duì)應(yīng)到表行，那么每一行就是“維度（dimension）”，每一列就是數(shù)據(jù)項(xiàng)（item）。
維度可以有單獨(dú)的名字，便于在圖表中顯示。維度名（dimension name）可以在定義在 dataset 的第一行（或者第一列）。例如上面的例子中，'score'、'amount'、'product' 就是維度名。從第二行開(kāi)始，才是正式的數(shù)據(jù)。`dataset.source` 中第一行（列）到底包含不包含維度名，ECharts 默認(rèn)會(huì)自動(dòng)探測(cè)。當(dāng)然也可以設(shè)置 `dataset.sourceHeader: true` 顯示聲明第一行（列）就是維度，或者 `dataset.sourceHeader: false` 表明第一行（列）開(kāi)始就直接是數(shù)據(jù)。
維度的定義，也可以使用單獨(dú)的 `dataset.dimensions` 或者 `series.dimensions` 來(lái)定義，這樣可以同時(shí)指定維度名，和維度的類型（dimension type）：
var option1 = {dataset: {dimensions: [{name: 'score'},// 可以簡(jiǎn)寫為 string，表示維度名。'amount',// 可以在 type 中指定維度類型。{name: 'product', type: 'ordinal'}],source: [...]},... };var option2 = {dataset: {source: [...]},series: {type: 'line',// 在系列中設(shè)置的 dimensions 會(huì)更優(yōu)先采納。dimensions: [null, // 可以設(shè)置為 null 表示不想設(shè)置維度名'amount',{name: 'product', type: 'ordinal'}]},... }; 復(fù)制代碼大多數(shù)情況下，我們并不需要去設(shè)置維度類型，因?yàn)闀?huì)自動(dòng)判斷。但是如果因?yàn)閿?shù)據(jù)為空之類原因?qū)е屡袛嗖蛔銐驕?zhǔn)確時(shí)，可以手動(dòng)設(shè)置維度類型。
維度類型（dimension type）可以取這些值：
- 'number': 默認(rèn)，表示普通數(shù)據(jù)。
- 'ordinal': 對(duì)于類目、文本這些 string 類型的數(shù)據(jù)，如果需要能在數(shù)軸上使用，須是 'ordinal' 類型。ECharts 默認(rèn)會(huì)自動(dòng)判斷這個(gè)類型。但是自動(dòng)判斷也是不可能很完備的，所以使用者也可以手動(dòng)強(qiáng)制指定。
- 'time': 表示時(shí)間數(shù)據(jù)。設(shè)置成 'time' 則能支持自動(dòng)解析數(shù)據(jù)成時(shí)間戳（timestamp），比如該維度的數(shù)據(jù)是 '2017-05-10'，會(huì)自動(dòng)被解析。時(shí)間類型的支持參見(jiàn) [data](option.html#series.data)。
- 'float': 如果設(shè)置成 `float`，在存儲(chǔ)時(shí)候會(huì)使用 `TypedArray`，對(duì)性能優(yōu)化有好處。
- 'int': 如果設(shè)置成 `float`，在存儲(chǔ)時(shí)候會(huì)使用 `TypedArray`，對(duì)性能優(yōu)化有好處。
數(shù)據(jù)到圖形的映射（encode）
了解了維度的概念后，我們就可以使用 `encode` 來(lái)做映射。`encode` 聲明的基本結(jié)構(gòu)如下，其中冒號(hào)左邊是坐標(biāo)系、標(biāo)簽等特定名稱，如 `'x'`, `'y'`, `'tooltip'` 等，冒號(hào)右邊是數(shù)據(jù)中的維度名（string 格式）或者維度的序號(hào)（number 格式，從 0 開(kāi)始計(jì)數(shù)），可以指定一個(gè)或多個(gè)維度（使用數(shù)組）。通常情況下，下面各種信息不需要所有的都寫，按需寫即可。
效果如下：
下面給出個(gè)更豐富的 `encode` 的 示例。
視覺(jué)通道（顏色、尺寸等）的映射
我們可以使用 `visualMap` 組件進(jìn)行視覺(jué)通道的映射。這是一個(gè)示例：
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']]},grid: {containLabel: true},xAxis: {name: 'amount'},yAxis: {type: 'category'},visualMap: {orient: 'horizontal',left: 'center',min: 10,max: 100,text: ['High Score', 'Low Score'],// Map the score column to colordimension: 0,inRange: {color: ['#D7DA8B', '#E15457']}},series: [{type: 'bar',encode: {// Map the "amount" column to X axis.x: 'amount',// Map the "product" column to Y axisy: 'product'}}] }; 復(fù)制代碼幾個(gè)常見(jiàn)的映射設(shè)置方式
問(wèn)：如何把第三列設(shè)置為 X 軸，第五列設(shè)置為 Y 軸？
答：
series: {encode: {x: 3, y: 5},... } 復(fù)制代碼問(wèn)：如何把第三行設(shè)置為 X 軸，第五行設(shè)置為 Y 軸？
答：
series: {encode: {x: 3, y: 5},seriesLayoutBy: 'row',... } 復(fù)制代碼問(wèn)：如何把第二列設(shè)置為標(biāo)簽？
答：
關(guān)于標(biāo)簽的顯示（`label.formatter`），現(xiàn)在支持使用這樣的語(yǔ)法：
'aaa{@product}bbb{@score}ccc{@[4]}ddd' 來(lái)引用某個(gè)具體的維度值。其中 '{@score}' 表示因?yàn)?“名為 score” 的維度里的值，'{@[4]}' 表示引用序號(hào)為 4 的維度里的值。
series: [{label: {show: true,// 標(biāo)簽中引用第二列。formatter: 'The value at column 2 is: {@[2]}.'},... }, {label: {show: true,// 標(biāo)簽中引用維度名為 product 的列。formatter: 'The product name is: {@product}.'},... }] 復(fù)制代碼問(wèn)：如何讓第 2 列和第 3 列顯示在提示框（tooltip）中？
答：
series: {encode: {tooltip: [2, 3]...},... } 復(fù)制代碼問(wèn)：數(shù)據(jù)里沒(méi)有維度名，那么怎么給出維度名？
答：
dataset: {dimensions: ['score', 'amount'],source: [[89.3, 3371],[92.1, 8123],[94.4, 1954],[85.4, 829]] } 復(fù)制代碼問(wèn)：如何把第四列映射為氣泡圖的點(diǎn)的大小？
答：
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, // 指向第三列（列序號(hào)從 0 開(kāi)始記，所以設(shè)置為 2）。min: 2, // 需要給出數(shù)值范圍，最小數(shù)值。max: 15, // 需要給出數(shù)值范圍，最大數(shù)值。inRange: {// 氣泡尺寸：5 像素到 60 像素。symbolSize: [5, 60]}},xAxis: {},yAxis: {},series: {type: 'scatter'} }; 復(fù)制代碼問(wèn)：encode 里指定了映射，但是不管用？
答：可以查查有沒(méi)有拼錯(cuò)，比如，維度名是：'Life Expectancy'，encode 中拼成了 'Life Expectency'。
數(shù)據(jù)的各種格式
多數(shù)常見(jiàn)圖表中，數(shù)據(jù)適于用二維表的形式描述。廣為使用的數(shù)據(jù)表格軟件（如 MS Excel、Numbers）或者關(guān)系數(shù)據(jù)數(shù)據(jù)庫(kù)都是二維表。他們的數(shù)據(jù)可以導(dǎo)出成 JSON 格式，輸入到 `dataset.source` 中，在不少情況下可以免去一些數(shù)據(jù)處理的步驟。
在 JavaScript 常用的數(shù)據(jù)傳輸格式中，二維數(shù)組可以比較直觀的存儲(chǔ)二維表。前面的示例都是使用二維數(shù)組表示。
除了二維數(shù)組以外，dataset 也支持例如下面 key-value 方式的數(shù)據(jù)格式，這類格式也非常常見(jiàn)。但是這類格式中，目前并不支持 `seriesLayoutBy` 參數(shù)。
此外，ECharts 4 之前一直以來(lái)的數(shù)據(jù)聲明方式仍然被正常支持，如果系列已經(jīng)聲明了 `series.data`， 那么就會(huì)使用 `series.data` 而非 `dataset`。
最后，給出一個(gè) 示例，多個(gè)圖表共享一個(gè) `dataset`，并帶有聯(lián)動(dòng)交互。
更詳細(xì)的信息，可以參見(jiàn)這個(gè) 教程。
總結(jié)
以上是生活随笔為你收集整理的关于 ECharts4 新增的数据集（dataset）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 2784Good Luck!
- 下一篇： 中国铁塔，室内分布系统