ECharts視覺(jué)映射組件(visualMap)

2018-09-19 15:54 更新

visualMap[i]

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

視覺(jué)元素可以是:

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

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

visualMap 組件可以定義為 分段型(visualMapPiecewise) 或 連續(xù)型(visualMapContinuous),通過(guò) type 來(lái)區(qū)分。例如:

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

視覺(jué)映射方式的配置

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

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

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

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

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


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)