資料可視化簡單來講就是将資料用圖表的形式來展示，專業的表達方式就是資料到視覺元素的映射過程。
ECharts 的每種圖表本身就内置了這種映射過程，我們之前學習到的柱形圖就是将資料映射到長度。
此外，ECharts 還提供了 visualMap 元件 來提供通用的視覺映射。visualMap 元件中可以使用的視覺元素有：
- 圖形類别（symbol）
- 圖形大小（symbolSize）
- 顔色（color）
- 透明度（opacity）
- 顔色透明度（colorAlpha）
- 顔色明暗度（colorLightness）
- 顔色飽和度（colorSaturation）
- 色調（colorHue）
資料和次元
ECharts 中的資料，一般存放于 series.data 中。
不同的圖表類型，資料格式有所不一樣，但是他們的共同特點就都是資料項（dataItem） 的集合。每個資料項含有 資料值（value） 和其他資訊（可選）。每個資料值，可以是單一的數值（一維）或者一個數組（多元）。
series.data 最常見的形式 是線性表，即一個普通數組：
series: {
data: [
{ // 這裡每一個項就是資料項（dataItem）
value: 2323, // 這是資料項的資料值（value）
itemStyle: {...}
},
1212, // 也可以直接是 dataItem 的 value，這更常見。
2323, // 每個 value 都是『一維』的。
4343,
3434
]
}
{ // 這裡每一個項就是資料項（dataItem）
value: [3434, 129, '聖馬力諾'], // 這是資料項的資料值（value）
[1212, 5454, '梵蒂岡'], // 也可以直接是 dataItem 的 value，這更常見。
[2323, 3223, '諾魯'], // 每個 value 都是『三維』的，每列是一個次元。
[4343, 23, '吐瓦魯'] // 假如是『氣泡圖』，常見第一次元映射到x軸，
// 第二次元映射到y軸，
// 第三次元映射到氣泡半徑（symbolSize）
在圖表中，往往預設把 value 的前一兩個次元進行映射，比如取第一個次元映射到x軸，取第二個次元映射到y軸。如果想要把更多的次元展現出來，可以借助 visualMap 。
visualMap 元件
visualMap 元件定義了把資料的指定次元映射到對應的視覺元素上。
visualMap 元件可以定義多個，進而可以同時對資料中的多個次元進行視覺映射。
visualMap 元件可以定義為 分段型（visualMapPiecewise） 或 連續型（visualMapContinuous），通過 type 來區分。例如：
option = {
visualMap: [
{ // 第一個 visualMap 元件
type: 'continuous', // 定義為連續型 visualMap
...
{ // 第二個 visualMap 元件
type: 'piecewise', // 定義為分段型 visualMap
}
],
...
};
分段型視覺映射元件，有三種模式：
- 連續型資料平均分段: 依據 visualMap-piecewise.splitNumber 來自動平均分割成若幹塊。
- 連續型資料自定義分段: 依據 visualMap-piecewise.pieces 來定義每塊範圍。
- 離散資料根據類别分段: 類别定義在 visualMap-piecewise.categories 中。
分段型視覺映射元件，展現形式如下圖：
執行個體
視覺映射方式的配置
visualMap 中可以指定資料的指定次元映射到對應的視覺元素上。
執行個體 1
{
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]
}
...
執行個體 2
...,
colorLightness: [0.2, 1], // 映射到明暗度上。也就是對本來的顔色進行明暗度處理。
// 本來的顔色可能是從全局色闆中選取的顔色，visualMap元件并不關心。
更多詳情，參見 visualMap.inRange 和 visualMap.outOfRange。