ECharts 數據的視覺映射

數據可視化簡單來講就是將數據用圖表的形式來展示,專業的表達方式就是數據到視覺元素的映射過程。

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
    ]
}
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 組件可以定義為 分段型(visualMapPiecewise) 或 連續型(visualMapContinuous),通過 type 來區分。例如:

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

分段型視覺映射組件,有三種模式:

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

分段型視覺映射組件,展現形式如下圖:


視覺映射方式的配置

visualMap 中可以指定數據的指定維度映射到對應的視覺元素上。

實例 1

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]
            }
        },
        ...
    ]
};

實例 2

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

更多詳情,參見 visualMap.inRangevisualMap.outOfRange