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' } // 文字颜色
    }
};