ECharts 数据的视觉映射

ECharts 数据的视觉映射（visualMap）详解

ECharts 的 visualMap 组件是强大的数据视觉映射工具，它根据数据值自动映射到视觉通道（如颜色、尺寸、透明度、符号等）。这让图表能直观表达数据的多维度信息，常用于散点图、热力图、柱状图、折线图等场景，帮助用户快速识别数据分布、异常值等。

visualMap 支持两种主要类型：

• continuous（连续型）：适合连续数值数据，渐变映射。
• piecewise（分段型）：适合离散或分区间数据，手动定义段落。

1. 基本配置结构

visualMap: {
    type: 'continuous',     // 或 'piecewise'
    min: 0,                 // 数据最小值
    max: 100,               // 数据最大值
    calculable: true,       // 是否显示可拖拽手柄（用于范围选择）
    orient: 'vertical',     // 'horizontal' 或 'vertical'
    left: 'right',          // 位置
    bottom: 'center',
    inRange: {              // 映射范围（数据在 min-max 内）
        color: ['#50a3ba', '#eac736', '#d94e5d'],  // 颜色渐变
        symbolSize: [10, 50]                       // 符号大小映射
    },
    outOfRange: {           // 数据超出范围的样式
        color: '#999'
    },
    dimension: 2,           // 指定映射哪个数据维度（从 series.data 的数组索引或 encode 开始）
    seriesIndex: 0          // 指定作用于哪个系列（默认全部）
}

2. 连续型 visualMap 示例（散点图颜色 + 大小映射）

常用于气泡图（bubble chart），展示三维数据。

option = {
    visualMap: {
        type: 'continuous',
        min: 0,
        max: 100,
        inRange: {
            color: ['#d94e5d', '#eac736', '#50a3ba'],  // 红-黄-蓝渐变
            symbolSize: [10, 40]
        }
    },
    xAxis: { type: 'value' },
    yAxis: { type: 'value' },
    series: [{
        type: 'scatter',
        data: [[10, 20, 50], [20, 30, 80], [30, 40, 20], ...],  // [x, y, value]
        visualMap: false  // 可关闭系列自带映射，使用全局
    }]
};

3. 分段型 visualMap 示例（自定义区间颜色）

适合分类数据或阈值警报。

visualMap: {
    type: 'piecewise',
    pieces: [               // 手动定义段落
        { min: 80, color: '#d94e5d', label: '高 (>80)' },
        { min: 50, max: 80, color: '#eac736', label: '中 (50-80)' },
        { max: 50, color: '#50a3ba', label: '低 (<50)' }
    ]
}

4. 热力图（heatmap）中的 visualMap

热力图默认依赖 visualMap 显示颜色强度。

优势与注意

• 自动映射：无需手动设置每个数据项的颜色/大小。
• 多 visualMap：可以定义多个，分别映射不同维度。
• 与 dataset 结合：在 dataset 中指定 dimension，更灵活。
• 交互：calculable: true 时，用户可拖拽选择范围，图表会自动过滤/高亮。

官方文档（最全面）：

• visualMap 手册：https://echarts.apache.org/handbook/zh/concepts/visual-map/
• 示例：https://echarts.apache.org/examples/zh/#chart-type-scatter （搜索 visualMap）

如果你需要具体图表（如气泡图、热力图）的完整代码，或结合 dataset/transform 的高级用法，告诉我，我可以提供定制示例！