ECharts 数据的视觉映射（visualMap）

ECharts 提供 视觉映射（visualMap） 功能，可以根据数据值 动态调整颜色、大小、透明度 等视觉元素，使数据展示更直观。

1. visualMap 简介

visualMap 主要用于 根据数据值映射颜色、透明度、尺寸等，适用于：

  • 地图（geo）
  • 热力图（heatmap）
  • 散点图（scatter）
  • 柱状图、折线图

visualMap 主要有两种模式：

  1. 连续映射（continuous）：颜色或大小随数据值连续变化。
  2. 分段映射（piecewise）：根据数据值划分 不同颜色区间。

2. 连续映射（continuous）

连续映射适用于 渐变色，比如温度、人口密度、海拔等数据。

2.1 地图示例

var option = {
    visualMap: {
        type: 'continuous',  // 颜色连续变化
        min: 0,  // 最小值
        max: 100,  // 最大值
        inRange: { color: ['#e0ffff', '#006edd'] },  // 颜色从浅蓝到深蓝
        calculable: true  // 显示可拖拽条
    },
    series: [{
        type: 'map',
        map: 'china',  // 使用中国地图
        data: [
            { name: '北京', value: 80 },
            { name: '上海', value: 60 },
            { name: '广州', value: 40 }
        ]
    }]
};

📌 关键点

  • type: 'continuous'：数据值连续变化
  • inRange.color：颜色渐变
  • calculable: true：添加可调整的颜色条

2.2 柱状图示例

var option = {
    visualMap: {
        type: 'continuous',
        min: 10,
        max: 100,
        inRange: { color: ['#f6e58d', '#ff6347'] }  // 颜色从黄到红
    },
    xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] },
    yAxis: {},
    series: [{
        type: 'bar',
        data: [20, 40, 60, 80, 100],
        itemStyle: { color: function (params) { return params.value; } }
    }]
};

📌 适用于

  • 柱状图、折线图、热力图
  • 数据值越大，颜色越深

3. 分段映射（piecewise）

适用于 离散型数据（如空气质量等级、风险评级等）。

3.1 地图示例

var option = {
    visualMap: {
        type: 'piecewise',  // 离散映射
        pieces: [
            { min: 80, label: '高风险', color: 'red' },
            { min: 50, max: 79, label: '中风险', color: 'orange' },
            { min: 20, max: 49, label: '低风险', color: 'yellow' },
            { max: 19, label: '安全', color: 'green' }
        ],
        orient: 'horizontal',  // 水平显示
        left: 'center'
    },
    series: [{
        type: 'map',
        map: 'china',
        data: [
            { name: '北京', value: 85 },
            { name: '上海', value: 55 },
            { name: '广州', value: 30 }
        ]
    }]
};

📌 关键点

  • type: 'piecewise'：数据分段
  • pieces：定义各个数据区间及颜色
  • orient: 'horizontal'：横向布局

3.2 散点图示例

var option = {
    visualMap: {
        type: 'piecewise',
        pieces: [
            { min: 50, color: 'red' },
            { min: 30, max: 49, color: 'orange' },
            { min: 10, max: 29, color: 'yellow' },
            { max: 9, color: 'green' }
        ]
    },
    xAxis: {},
    yAxis: {},
    series: [{
        type: 'scatter',
        data: [[1, 5], [2, 15], [3, 35], [4, 55]],
        symbolSize: function (data) { return data[1] / 2; }
    }]
};

📌 适用于

  • 散点图、气泡图
  • 基于数值范围调整颜色

4. 调整视觉属性

visualMap 除了颜色映射，还可以控制：

  • 尺寸（symbolSize）
  • 透明度（opacity）
  • 边框颜色（borderColor）

4.1 控制透明度

var option = {
    visualMap: {
        min: 0,
        max: 100,
        inRange: { opacity: [0.2, 1] }  // 透明度 20% ~ 100%
    },
    series: [{
        type: 'scatter',
        data: [[1, 10], [2, 30], [3, 50]]
    }]
};

📌 数据值越大，不透明度越高

4.2 控制大小

var option = {
    visualMap: {
        min: 10,
        max: 100,
        inRange: { symbolSize: [10, 50] }  // 点的大小范围
    },
    series: [{
        type: 'scatter',
        data: [[1, 20], [2, 50], [3, 80]]
    }]
};

📌 数据值越大，点的大小越大

5. visualMap 的完整参数

参数说明可选值
type视觉映射类型continuous（连续） / piecewise（分段）
min/max数据最小值、最大值数值
inRange映射的视觉属性{ color, opacity, symbolSize }
outOfRange超出范围的数据样式{ color, opacity }
pieces分段区间（仅适用于 piecewise）[{ min, max, color }]
calculable是否显示可拖拽条true / false
orient组件方向'vertical' / 'horizontal'

6. visualMap 适用场景

场景模式示例
地图数据（人口密度、温度）continuous地图颜色渐变
空气质量、风险等级piecewise颜色分级
散点图（点大小、透明度）continuous气泡图
柱状图（颜色随数据变化）continuous高亮关键数据

7. 总结

✅ visualMap 让数据可视化更直观 ✅ continuous 适用于连续数据，piecewise 适用于分类数据 ✅ 可映射颜色、大小、透明度等属性 ✅ 适用于地图、热力图、散点图、柱状图等

🚀 你希望在哪种图表中应用 visualMap？