ECharts視覺映射組件（visualMap）

visualMap[i]

visualMap 是視覺映射組件，用于進(jìn)行『視覺編碼』，也就是將數(shù)據(jù)映射到視覺元素（視覺通道）。

視覺元素可以是：

• symbol: 圖元的圖形類別。
• symbolSize: 圖元的大小。
• color: 圖元的顏色。
• colorAlpha: 圖元的顏色的透明度。
• opacity: 圖元以及其附屬物（如文字標(biāo)簽）的透明度。
• colorLightness: 顏色的明暗度，參見 HSL。
• colorSaturation: 顏色的飽和度，參見 HSL。
• colorHue: 顏色的色調(diào)，參見 HSL。

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

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

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

視覺映射方式的配置

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

在 visualMap 組件所控制的 series 中，如果 series 中某個(gè)數(shù)據(jù)項(xiàng)需要避開 visualMap 映射，可以這么配置：

series : [
    {name: 'Shanghai', value: 251},
    {name: 'Haikou', value: 21},
    // 設(shè)置 `visualMap: false` 則 visualMap 不對此項(xiàng)進(jìn)行控制，此時(shí)系列
    // 可使用自身的視覺參數(shù)（color/symbol/ ...控制此項(xiàng)的顯示。
    {name: 'Beijing', value: 821, visualMap: false},
    ...
]

與 ECharts2 中 dataRange 的關(guān)系

visualMap 是由 ECharts2 中的 dataRange 組件改名以及擴(kuò)展而來。ECharts 3里 option 中的 dataRange 配置項(xiàng)仍然被兼容，會自動轉(zhuǎn)換成 visualMap 配置項(xiàng)。在 option 中推薦寫 visualMap 而非 dataRange。