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.inRange 和 visualMap.outOfRange。