數據的視覺對映

  數據視覺化是 數據 到 視覺元素 的對映過程（這個過程也可稱為視覺編碼，視覺元素也可稱為視覺通道）。

  Apache ECharts^TM 的每種圖表本身就內建了這種對映過程，比如折線圖把數據對映到『線』，柱狀圖把數據對映到『長度』。一些更復雜的圖表，如 graph、事件河流圖、treemap 也都會做出他們內建的對映。

  此外，ECharts 還提供了 visualMap 元件 來提供通用的視覺對映。visualMap 元件中可以使用的視覺元素有：
圖形類別（symbol）、圖形大小（symbolSize）
顏色（color）、透明度（opacity）、顏色透明度（colorAlpha）、
顏色明暗度（colorLightness）、顏色飽和度（colorSaturation）、色調（colorHue）

  下面對 visualMap 元件的使用方式進行簡要的介紹。

1. 數據和維度

  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 。最常見的情況，氣泡圖（scatter） 使用半徑展現了第三個維度。

2. visualMap 元件

  visualMap 元件定義了把數據的『哪個維度』對映到『什麼視覺元素上』。

  現在提供如下兩種型別的visualMap元件，通過 visualMap.type 來區分。

  其定義結構例如：

option = {
    visualMap: [ // 可以同時定義多個 visualMap 元件。
        { // 第一個 visualMap 元件
            type: 'continuous', // 定義為連續型 visualMap
            ...
        },
        { // 第二個 visualMap 元件
            type: 'piecewise', // 定義為分段型 visualMap
            ...
        }
    ],
    ...
};

連續型（visualMapContinuous）

分段型（visualMapPiecewise）：

  分段型視覺對映元件（visualMapPiecewise），有三種模式：

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

視覺對映方式的配置

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

  例一：

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

  例二：

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

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