VisualMap詳解

一、VisualMap介紹

VisualMap 是 ECharts 中用於視覺映射組件。它可以將不同數值（包括連續的和離散的）的數據映射成不同的顏色、大小等，從而直觀展現數據的分布情況。

VisualMap 可以根據數據類型自動判斷是否為連續型視覺映射組件，或指定為分段型視覺映射組件。

二、VisualMap的使用

VisualMap 可以用於直觀標識當前數據是否存在偏差，將數據高低區間通過不同顏色、大小、形狀等視覺編碼的方式，以引導用戶對數據加以不同程度的思考。

VisualMap 的常見使用場景有地圖等數據可視化圖表。

三、VisualMap的配置項

VisualMap 的核心配置在於它的type、min、max、range四個配置項，分別表示著連續型視覺映射組件的類型、數據的最大值以及最小值，以及拆分分段的區間。

option = {
    visualMap: {
        type: 'continuous', // 連續型視覺映射組件
        min: 0,
        max: 1000,
        range: [10, 500],
        color: ['blue', 'green', 'yellow', 'red'], // 區間顏色定義
        textStyle: { color: '#fff' } // 文字顏色
    }
};

四、VisualMap的類型

VisualMap 的類型主要包括兩種：piecewise 分段型視覺映射組件和continuous 連續型視覺映射組件。下面我們分別來詳細介紹這兩種類型。

五、分段型視覺映射組件

分段型視覺映射組件分別用於區間數據的顏色映射。它的核心配置在於pieces項，其中每個 piece表示一個區間，內部可枚舉配置項進行區間樣式的靈活定義。

option = {
    visualMap: {
        type: 'piecewise', // 分段型視覺映射組件
        pieces: [
            { min: 0, max: 10, label: '0 ~ 10', color: '#ccc' },
            { min: 10, max: 20, label: '10 ~ 20', color: '#999' },
            { min: 20, max: 30, label: '20 ~ 30', color: '#666' },
            { min: 30, max: 40, label: '30 ~ 40', color: '#333' },
            { min: 40, max: 50, label: '40 ~ 50', color: '#000' }
        ],
        textStyle: { color: '#fff' }
    }
};

六、連續型視覺映射組件

連續型視覺映射組件是將區間數據進行有效的連續性展示。區間的分割採用min、max、range三個參數的定義。

option = {
    visualMap: {
        type: 'continuous', // 連續型視覺映射組件
        min: 0,
        max: 500,
        range: [100, 200],
        color: ['blue', 'green', 'yellow', 'red'],
        textStyle: { color: '#fff' }
    }
};

七、VisualMap的附加配置項

VisualMap 還有多個附加的配置項，包括inverse、precision、itemWidth、itemHeight、align、left、top 等多項配置。

option = {
    visualMap: {
        type: 'continuous', // 連續型視覺映射組件
        min: 0,
        max: 1000,
        range: [10, 500],
        inverse: true, // 翻轉顏色順序
        precision: 2, // 數據範圍小數精度
        itemWidth: 20, // 色塊寬度
        itemHeight: 100, // 色塊高度
        align: 'auto', // 顯示位置自動計算
        left: 'left', // 顯示位置居左
        top: 'bottom', // 顯示位置居底
        color: ['blue', 'green', 'yellow', 'red'], // 區間顏色定義
        textStyle: { color: '#fff' } // 文字顏色
    }
};