資料的視覺對映
資料視覺化是資料到視覺元素的對映過程。這個過程也常被稱為視覺編碼，視覺元素亦可稱為視覺通道。
Apache EChartsTM 的每種圖表都內建了這種對映過程。例如，折線圖將資料對映為線，柱狀圖將資料對映為高度。一些更復雜的圖表，如 graph（關係圖）、themeRiver（主題河流圖）和 treemap（矩形樹圖），都有其獨特的內建對映。
除此之外，ECharts 還提供了 visualMap 元件 用於通用的視覺對映。visualMap 元件中允許的視覺元素有：
symbol（圖形）、symbolSize（圖形大小）color（顏色）、opacity（透明度）、colorAlpha（顏色的 Alpha 通道）colorLightness（顏色的明暗度）、colorSaturation（顏色的飽和度）、colorHue（顏色的色調）
接下來，我們將介紹如何使用 visualMap 元件。
資料和維度
在 ECharts 中，資料通常儲存在 series.data 中。根據圖表型別（如列表、樹、圖等）的不同，資料的形式可能會有所差異。但它們有一個共同的特點，即它們都是資料項的集合。每個資料項都包含資料值，以及根據需要包含的其他資訊。每個資料值可以是單個值（一維）或一個數組（多維）。
例如，series.data 是最常見的形式，它是一個列表，即一個普通的陣列：
series: {
data: [
{
// every item here is a dataItem
value: 2323, // this is data value
itemStyle: {}
},
1212, // it can also be a value of dataItem, which is a more common case
2323, // every data value here is one dimension
4343,
3434
];
}series: {
data: [
{
// every item here is a dataItem
value: [3434, 129, 'San Marino'], // this is data value
itemStyle: {}
},
[1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case
[2323, 3223, 'Nauru'], // every data value here is three dimension
[4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,
// the second dimension to y axis,
// and the third dimension to symbolSize
];
}通常，前一兩個維度用於座標軸對映。例如，將第一維度對映到 x 軸，第二維度對映到 y 軸。如果你想表示更多的維度，visualMap 正是你所需要的。最常見的情況是，散點圖 使用點的大小來表示第三個維度。
visualMap 元件
visualMap 元件定義了從資料的哪個維度到何種視覺元素的對映。
ECharts 支援以下兩種型別的 visualMap 元件，透過 visualMap.type 來區分。
其結構定義如下：
option = {
visualMap: [
// can define multiple visualMap components at the same time
{
// the first visualMap component
type: 'continuous' // defined as continuous visualMap
// ...
},
{
// the second visualMap component
type: 'piecewise' // defined as discrete visualMap
// ...
}
]
// ...
};連續型和分段型視覺對映元件
ECharts 的視覺對映元件分為連續型（visualMapContinuous）和分段型（visualMapPiecewise）。
連續型意味著用於視覺對映的資料維度是連續的數值，而分段型則表示資料被劃分為多個分段或屬於離散資料。
連續型視覺對映
連續型視覺對映可以透過指定最大值和最小值來確定視覺對映的範圍。
option = {
visualMap: [
{
type: 'continuous',
min: 0,
max: 5000,
dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped
seriesIndex: 4, // The fourth series is mapped.
inRange: {
// The visual configuration in the selected range
color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping
// the minimum value of the data is mapped to 'blue', and
// the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.
// The rest is automatically calculated linearly.
symbolSize: [30, 100] // Defines the mapping range for the graphic size.
// The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.
// The maximum value is mapped to 100.
// The rest is calculated linearly automatically.
},
outOfRange: {
// Check the out of range visual configuration
symbolSize: [30, 100]
}
}
// ...
]
};其中 visualMap.inRange 表示資料在對映範圍內所使用的樣式；而 visualMap.outOfRange 指定了資料在對映範圍之外的樣式。
visualMap.dimension 指定了資料的哪個維度將被進行視覺對映。
分段型視覺對映
分段型視覺對映元件有三種模式。
- 連續資料平均分段：基於 visualMap-piecewise.splitNumber 將資料自動平均切分成若干塊。
- 連續資料自定義分段：基於 visualMap-piecewise.pieces 定義每個分段的範圍。
- 離散資料（類別資料）：類別在 visualMap-piecewise.categories 中定義。
要使用分段型視覺對映，你需要將 type 設定為 'piecewise'，並選擇上述三種配置項之一。