ECharts數(shù)據(jù)的視覺映射

數(shù)據(jù)可視化

數(shù)據(jù)可視化指的是數(shù)據(jù)到視覺元素的映射過(guò)程。我們也可以將該過(guò)程稱為視覺編碼，把視覺元素當(dāng)成視覺通道。

Echarts 幫助我們編程或者免編程實(shí)現(xiàn)豐富的大數(shù)據(jù)可視化，它的每種圖表都內(nèi)置了上述的映射過(guò)程，例如柱狀圖將數(shù)據(jù)映射到 長(zhǎng)度，折線圖把數(shù)據(jù)映射到 線。不止簡(jiǎn)單的圖表，一些較為復(fù)雜的圖表也會(huì)有內(nèi)置的映射。

ECharts 還提供了 visualMap 組件來(lái)提供通用的視覺映射。visualMap 組件中可以使用的視覺元素有：圖形類別（symbol）、圖形大?。╯ymbolSize）顏色（color）、透明度（opacity）、顏色透明度（colorAlpha）、顏色明暗度（colorLightness）、顏色飽和度（colorSaturation）、色調(diào)（colorHue）

下面對(duì) visualMap 組件的使用方式進(jìn)行簡(jiǎn)要的介紹。

數(shù)據(jù)和維度

ECharts 的 series.data 一般用于存放數(shù)據(jù)。其中的數(shù)據(jù)的具體形式會(huì)根據(jù)圖表類型的不同而不同，可能是線性表、樹、圖等等。但是不同類型的數(shù)據(jù)也有一個(gè)共性：都是數(shù)據(jù)項(xiàng)（dataItem） 的集合，其中每個(gè)數(shù)據(jù)項(xiàng)包含了 數(shù)據(jù)值（value）以及其他需要用到的信息。

注：每個(gè)數(shù)據(jù)值都可以是單一的數(shù)值（一維）或者一個(gè)數(shù)組（多維）

例如，series.data 最常見的形式，是線性表，即一個(gè)普通數(shù)組：

series: {
    data: [
        {       // 這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem）
            value: 2323, // 這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）
            itemStyle: {...}
        },
        1212,   // 也可以直接是 dataItem 的 value，這更常見。
        2323,   // 每個(gè) value 都是『一維』的。
        4343,
        3434
    ]
}

series: {
    data: [
        {                        // 這里每一個(gè)項(xiàng)就是數(shù)據(jù)項(xiàng)（dataItem）
            value: [3434, 129,  '圣馬力諾'], // 這是數(shù)據(jù)項(xiàng)的數(shù)據(jù)值（value）
            itemStyle: {...}
        },
        [1212, 5454, '梵蒂岡'],   // 也可以直接是 dataItem 的 value，這更常見。
        [2323, 3223, '瑙魯'],     // 每個(gè) value 都是『三維』的，每列是一個(gè)維度。
        [4343, 23,   '圖瓦盧']    // 假如是『氣泡圖』，常見第一維度映射到x軸，
                                 // 第二維度映射到y(tǒng)軸，
                                 // 第三維度映射到氣泡半徑（symbolSize）
    ]
}

在圖表中，往往默認(rèn)把 value 的前一兩個(gè)維度進(jìn)行映射，比如取第一個(gè)維度映射到 x 軸，取第二個(gè)維度映射到 y 軸。

可以借助 visualMap 把更多的維度展現(xiàn)出來(lái)。最常見的情況，氣泡圖（scatter） 使用半徑展現(xiàn)了第三個(gè)維度。

visualMap 組件

visualMap 組件的定義：把數(shù)據(jù)的哪個(gè)維度映射到什么視覺元素上。

現(xiàn)在提供如下兩種類型的 visualMap 組件，通過(guò) visualMap.type 來(lái)區(qū)分。

其定義結(jié)構(gòu)例如：

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

連續(xù)型（visualMapContinuous）：

點(diǎn)擊編輯實(shí)例 》》

分段型（visualMapPiecewise）：

點(diǎn)擊編輯實(shí)例 》》

以下是分段型視覺映射組件（visualMapPiecewise）的三種模式：

• 連續(xù)型數(shù)據(jù)平均分段: 依據(jù) visualMap-piecewise.splitNumber 來(lái)自動(dòng)平均分割成若干塊。
• 連續(xù)型數(shù)據(jù)自定義分段: 依據(jù) visualMap-piecewise.pieces 來(lái)定義每塊范圍。
• 離散數(shù)據(jù)（類別性數(shù)據(jù)）: 類別定義在 visualMap-piecewise.categories 中。

Echarts 視覺映射方式的配置

數(shù)據(jù)可視化是數(shù)據(jù)到視覺元素的映射，visualMap 中可以指定數(shù)據(jù)的哪個(gè)維度映射到哪些視覺元素中。

實(shí)例一：

option = {
    visualMap: [
        {
            type: 'piecewise'
            min: 0,
            max: 5000,
            dimension: 3,       // series.data 的第四個(gè)維度（即 value[3]）被映射
            seriesIndex: 4,     // 對(duì)第四個(gè)系列進(jìn)行映射。
            inRange: {          // 選中范圍中的視覺配置
                color: ['blue', '#121122', 'red'], // 定義了圖形顏色映射的顏色列表，
                                                    // 數(shù)據(jù)最小值映射到'blue'上，
                                                    // 最大值映射到'red'上，
                                                    // 其余自動(dòng)線性計(jì)算。
                symbolSize: [30, 100]               // 定義了圖形尺寸的映射范圍，
                                                    // 數(shù)據(jù)最小值映射到30上，
                                                    // 最大值映射到100上，
                                                    // 其余自動(dòng)線性計(jì)算。
            },
            outOfRange: {       // 選中范圍外的視覺配置
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};

實(shí)例二：

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

更多詳情，參見 visualMap.inRange 和 visualMap.outOfRange。