Echarts-數據的視覺映射

來源：官網，自己整理

數據可視化是 數據 到 視覺元素 的映射過程（這個過程也可稱為視覺編碼，視覺元素也可稱為視覺通道）。

ECharts 的每種圖表本身就內置了這種映射過程，比如折線圖把數據映射到『線』，柱狀圖把數據映射到『長度』。一些更復雜的圖表，如 graph、事件河流圖、treemap也都會做出他們內置的映射。

此外，ECharts 還提供了 visualMap 組件 來提供通用的視覺映射。visualMap 組件中可以使用的視覺元素有：
圖形類別（symbol）、圖形大小（symbolSize）
顏色（color）、透明度（opacity）、顏色透明度（colorAlpha）、
顏色明暗度（colorLightness）、顏色飽和度（colorSaturation）、色調（colorHue）

下面對 visualMap 組件的使用方式進行簡要的介紹。

數據和維度

ECharts中的數據，一般存放於 series.data 中。根據圖表類型不同，數據的具體形式也可能有些許差異。比如可能是『線性表』、『樹』、『圖』等。但他們都有個共性：都是『數據項（dataItem）』的集合。每個數據項含有『數據值（value）』和其他信息（如果需要的話）。每個數據值，可以是單一的數值（一維）或者一個數組（多維）。

例如，series.data 最常見的形式，是『線性表』，即一個普通數組：

series: { data: [ { // 這里每一個項就是數據項（dataItem） value: 2323, // 這是數據項的數據值（value） itemStyle: {...} }, 1212, // 也可以直接是 dataItem 的 value，這更常見。 2323, // 每個 value 都是『一維』的。 4343, 3434 ] }

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


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

visualMap 組件

visualMap 組件定義了把數據的『哪個維度』映射到『什么視覺元素上』。

現在提供如下兩種類型的visualMap組件，通過 visualMap.type 來區分。

其定義結構例如：

option = { visualMap: [ // 可以同時定義多個 visualMap 組件。 { // 第一個 visualMap 組件 type: 'continuous', // 定義為連續型 viusalMap ... }, { // 第二個 visualMap 組件 type: 'piecewise', // 定義為分段型 visualMap ... } ], ... };
連續型（visualMapContinuous）
分段型（visualMapPiecewise）

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

• 連續型數據平均分段: 依據 visualMap-piecewise.splitNumber 來自動平均分割成若干塊。
• 連續型數據自定義分段: 依據 visualMap-piecewise.pieces 來定義每塊范圍。
• 離散數據（類別性數據）: 類別定義在 visualMap-piecewise.categories 中。

視覺映射方式的配置

既然是『數據』到『視覺元素』的映射，visualMap 中可以指定數據的『哪個維度』（參見visualMap.dimension）映射到哪些『視覺元素』（參見 visualMap.inRange 和 visualMap.outOfRange）中。

例一：

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

例二：

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

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