上一篇：ECharts 響應(yīng)式下一篇：ECharts 事件處理

ECharts 數(shù)據(jù)的視覺映射

數(shù)據(jù)可視化簡單來講就是將數(shù)據(jù)用圖表的形式來展示，專業(yè)的表達方式就是數(shù)據(jù)到視覺元素的映射過程。

ECharts 的每種圖表本身就內(nèi)置了這種映射過程，我們之前學(xué)習(xí)到的柱形圖就是將數(shù)據(jù)映射到長度。

此外，ECharts 還提供了 visualMap 組件來提供通用的視覺映射。visualMap 組件中可以使用的視覺元素有：

圖形類別（symbol）
圖形大小（symbolSize）
顏色（color）
透明度（opacity）
顏色透明度（colorAlpha）
顏色明暗度（colorLightness）
顏色飽和度（colorSaturation）
色調(diào)（colorHue）

數(shù)據(jù)和維度

ECharts 中的數(shù)據(jù)，一般存放于 series.data 中。

不同的圖表類型，數(shù)據(jù)格式有所不一樣，但是他們的共同特點就都是數(shù)據(jù)項（dataItem）的集合。每個數(shù)據(jù)項含有數(shù)據(jù)值（value）和其他信息（可選）。每個數(shù)據(jù)值，可以是單一的數(shù)值（一維）或者一個數(shù)組（多維）。

series.data 最常見的形式是線性表，即一個普通數(shù)組：

series: {
? ? data: [
? ? ? ? { ? ? ? // 這里每一個項就是數(shù)據(jù)項（dataItem）
? ? ? ? ? ? value: 2323, // 這是數(shù)據(jù)項的數(shù)據(jù)值（value）
? ? ? ? ? ? itemStyle: {...}
? ? ? ? },
? ? ? ? 1212, ? // 也可以直接是 dataItem 的 value，這更常見。
? ? ? ? 2323, ? // 每個 value 都是『一維』的。
? ? ? ? 4343,
? ? ? ? 3434
? ? ]
}
series: {
? ? data: [
? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ?// 這里每一個項就是數(shù)據(jù)項（dataItem）
? ? ? ? ? ? value: [3434, 129, ?'圣馬力諾'], // 這是數(shù)據(jù)項的數(shù)據(jù)值（value）
? ? ? ? ? ? itemStyle: {...}
? ? ? ? },
? ? ? ? [1212, 5454, '梵蒂岡'], ? // 也可以直接是 dataItem 的 value，這更常見。
? ? ? ? [2323, 3223, '瑙魯'], ? ? // 每個 value 都是『三維』的，每列是一個維度。
? ? ? ? [4343, 23, ? '圖瓦盧'] ? ?// 假如是『氣泡圖』，常見第一維度映射到x軸，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 第二維度映射到y(tǒng)軸，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 第三維度映射到氣泡半徑（symbolSize）
? ? ]
}

在圖表中，往往默認(rèn)把 value 的前一兩個維度進行映射，比如取第一個維度映射到x軸，取第二個維度映射到y(tǒng)軸。如果想要把更多的維度展現(xiàn)出來，可以借助 visualMap 。

visualMap 組件

visualMap 組件定義了把數(shù)據(jù)的指定維度映射到對應(yīng)的視覺元素上。

visualMap 組件可以定義多個，從而可以同時對數(shù)據(jù)中的多個維度進行視覺映射。

visualMap 組件可以定義為分段型（visualMapPiecewise）或連續(xù)型（visualMapContinuous），通過 type 來區(qū)分。例如：

option = {
? ? visualMap: [
? ? ? ? { // 第一個 visualMap 組件
? ? ? ? ? ? type: 'continuous', // 定義為連續(xù)型 visualMap
? ? ? ? ? ? ...
? ? ? ? },
? ? ? ? { // 第二個 visualMap 組件
? ? ? ? ? ? type: 'piecewise', // 定義為分段型 visualMap
? ? ? ? ? ? ...
? ? ? ? }
? ? ],
? ? ...
};

分段型視覺映射組件，有三種模式：

連續(xù)型數(shù)據(jù)平均分段: 依據(jù) visualMap-piecewise.splitNumber 來自動平均分割成若干塊。
連續(xù)型數(shù)據(jù)自定義分段: 依據(jù) visualMap-piecewise.pieces 來定義每塊范圍。
離散數(shù)據(jù)根據(jù)類別分段: 類別定義在 visualMap-piecewise.categories 中。

分段型視覺映射組件，展現(xiàn)形式如下圖：

實例

運行代碼 ?

視覺映射方式的配置

visualMap 中可以指定數(shù)據(jù)的指定維度映射到對應(yīng)的視覺元素上。

實例 1

option = {
? ? visualMap: [
? ? ? ? {
? ? ? ? ? ? type: 'piecewise'
? ? ? ? ? ? min: 0,
? ? ? ? ? ? max: 5000,
? ? ? ? ? ? dimension: 3, ? ? ? // series.data 的第四個維度（即 value[3]）被映射
? ? ? ? ? ? seriesIndex: 4, ? ? // 對第四個系列進行映射。
? ? ? ? ? ? inRange: { ? ? ? ? ?// 選中范圍中的視覺配置
? ? ? ? ? ? ? ? color: ['blue', '#121122', 'red'], // 定義了圖形顏色映射的顏色列表，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 數(shù)據(jù)最小值映射到'blue'上，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 最大值映射到'red'上，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 其余自動線性計算。
? ? ? ? ? ? ? ? symbolSize: [30, 100] ? ? ? ? ? ? ? // 定義了圖形尺寸的映射范圍，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 數(shù)據(jù)最小值映射到30上，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 最大值映射到100上，
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 其余自動線性計算。
? ? ? ? ? ? },
? ? ? ? ? ? outOfRange: { ? ? ? // 選中范圍外的視覺配置
? ? ? ? ? ? ? ? symbolSize: [30, 100]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? ...
? ? ]
};

實例 2

option = {
? ? visualMap: [
? ? ? ? {
? ? ? ? ? ? ...,
? ? ? ? ? ? inRange: { ? ? ? ? ?// 選中范圍中的視覺配置
? ? ? ? ? ? ? ? colorLightness: [0.2, 1], // 映射到明暗度上。也就是對本來的顏色進行明暗度處理。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 本來的顏色可能是從全局色板中選取的顏色，visualMap組件并不關(guān)心。
? ? ? ? ? ? ? ? symbolSize: [30, 100]
? ? ? ? ? ? },
? ? ? ? ? ? ...
? ? ? ? },
? ? ? ? ...
? ? ]
};

更多詳情，參見 visualMap.inRange 和 visualMap.outOfRange。