视觉映射(VisualMap)

视觉映射(VisualMap)的基本概念

视觉映射是ECharts中用于将数据值映射到视觉元素（如颜色、大小、透明度等）的重要组件。它允许用户通过直观的视觉差异快速理解数据分布和变化趋势。视觉映射通常用于热力图、散点图、地图等需要展示数据强度或密度的图表类型。

在ECharts中，视觉映射主要通过visualMap配置项实现，它支持连续型和分段型两种映射方式。连续型视觉映射适合处理连续数值数据，而分段型则适合处理离散的分类数据。

// 基本视觉映射配置示例
option = {
  visualMap: {
    type: 'continuous', // 连续型
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
  },
  // ...其他图表配置
};

视觉映射的类型与配置

连续型视觉映射(continuous)

连续型视觉映射适用于数值范围连续的数据集。它会根据数据值在最小值和最大值之间的位置，自动计算对应的视觉表现。

option = {
  visualMap: {
    type: 'continuous',
    // 数据范围
    min: 10,
    max: 35,
    // 颜色映射范围
    inRange: {
      color: ['green', 'yellow', 'red'],
      symbolSize: [10, 30]
    },
    // 是否显示拖拽手柄
    calculable: true,
    // 视觉映射组件位置
    left: 'right',
    top: 'bottom'
  },
  series: [{
    type: 'scatter',
    data: [
      [12, 23, 15],
      [24, 30, 25],
      [18, 22, 32],
      // ...更多数据
    ]
  }]
};

分段型视觉映射(piecewise)

分段型视觉映射将数据划分为若干区间，每个区间使用不同的视觉表现。这种方式适合有明显分类或阶段性的数据。

option = {
  visualMap: {
    type: 'piecewise',
    pieces: [
      {min: 0, max: 10, label: '0-10', color: '#1e90ff'},
      {min: 10, max: 20, label: '10-20', color: '#3cb371'},
      {min: 20, max: 30, label: '20-30', color: '#ffa500'},
      {min: 30, max: 40, label: '30-40', color: '#ff4500'}
    ],
    // 是否显示分段区间
    showLabel: true,
    // 是否显示拖拽手柄
    calculable: true
  },
  series: [{
    type: 'heatmap',
    data: [
      [0, 0, 5],
      [0, 1, 15],
      [0, 2, 25],
      [0, 3, 35],
      // ...更多数据
    ]
  }]
};

视觉映射的视觉通道

视觉映射支持多种视觉通道的映射，包括但不限于：

颜色映射

最常见的视觉映射方式，通过不同颜色表示不同数值范围。

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  inRange: {
    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
  }
}

尺寸映射

通过图形元素的大小变化反映数据值的大小。

visualMap: {
  type: 'continuous',
  dimension: 2, // 指定数据维度
  min: 0,
  max: 100,
  inRange: {
    symbolSize: [5, 30] // 最小和最大尺寸
  }
}

透明度映射

通过透明度变化展示数据强度。

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  inRange: {
    color: '#ff0000',
    opacity: [0.2, 1] // 透明度范围
  }
}

多通道组合映射

可以同时组合多个视觉通道进行映射。

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  inRange: {
    color: ['blue', 'red'],
    symbolSize: [10, 40],
    opacity: [0.5, 1]
  }
}

视觉映射的交互功能

ECharts的视觉映射组件提供了丰富的交互功能，增强用户体验。

范围选择

用户可以通过拖拽手柄选择感兴趣的数据范围。

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  range: [20, 80], // 初始选中范围
  calculable: true, // 显示拖拽手柄
  realtime: true, // 实时更新图表
  inRange: {
    color: ['#50a3ba', '#eac736', '#d94e5d']
  }
}

多维度映射

可以对同一数据集的不同维度分别进行视觉映射。

option = {
  visualMap: [
    {
      type: 'continuous',
      dimension: 0, // 第一个维度
      min: 0,
      max: 10,
      inRange: {
        color: ['blue', 'green']
      }
    },
    {
      type: 'continuous',
      dimension: 1, // 第二个维度
      min: 0,
      max: 5,
      inRange: {
        symbolSize: [5, 30]
      }
    }
  ],
  series: [{
    type: 'scatter',
    data: [
      [3, 4, 5],
      [5, 2, 8],
      [7, 3, 1],
      // ...更多数据
    ]
  }]
};

联动过滤

视觉映射可以与图表联动，过滤显示特定范围的数据。

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  inRange: {
    color: ['#50a3ba', '#eac736', '#d94e5d']
  },
  // 过滤不在范围内的数据
  outOfRange: {
    color: '#ccc',
    symbolSize: 5,
    opacity: 0.3
  }
}

视觉映射的高级应用

自定义分段逻辑

对于分段型视觉映射，可以完全自定义分段逻辑。

visualMap: {
  type: 'piecewise',
  pieces: [
    {value: 0, color: '#1e90ff', label: '零'},
    {value: 1, color: '#3cb371', label: '一'},
    {value: 2, color: '#ffa500', label: '二'},
    {value: 3, color: '#ff4500', label: '三'},
    {value: 4, color: '#8a2be2', label: '四'}
  ],
  categories: [0, 1, 2, 3, 4]
}

多图表共享视觉映射

多个图表可以共享同一个视觉映射配置。

const commonVisualMap = {
  type: 'continuous',
  min: 0,
  max: 100,
  inRange: {
    color: ['blue', 'red']
  }
};

option = {
  visualMap: commonVisualMap,
  series: [
    {
      type: 'scatter',
      data: [...],
      // 引用共享的视觉映射
      visualMap: false
    },
    {
      type: 'heatmap',
      data: [...],
      // 引用共享的视觉映射
      visualMap: false
    }
  ]
};

响应式视觉映射

视觉映射可以响应式地适应不同设备和屏幕尺寸。

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  // 根据屏幕宽度调整位置
  left: window.innerWidth > 768 ? 'right' : 'bottom',
  // 根据屏幕宽度调整方向
  orient: window.innerWidth > 768 ? 'vertical' : 'horizontal',
  inRange: {
    color: ['blue', 'red']
  }
}

视觉映射在特定图表中的应用

在地图中的应用

视觉映射在地图中常用于展示区域数据强度。

option = {
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 1000,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
    }
  },
  series: [{
    name: '人口密度',
    type: 'map',
    map: 'china',
    data: [
      {name: '北京', value: 1000},
      {name: '上海', value: 800},
      // ...更多地区数据
    ]
  }]
};

在热力图中的应用

热力图通常使用颜色渐变来展示数据密度。

option = {
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 10,
    inRange: {
      color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    }
  },
  series: [{
    type: 'heatmap',
    data: [
      [0, 0, 5],
      [0, 1, 7],
      [0, 2, 3],
      // ...更多数据
    ]
  }]
};

在散点图中的应用

散点图可以通过视觉映射同时展示多个维度的数据。

option = {
  visualMap: [
    {
      type: 'continuous',
      dimension: 2, // 第三个数据维度控制颜色
      min: 0,
      max: 10,
      inRange: {
        color: ['blue', 'red']
      }
    },
    {
      type: 'continuous',
      dimension: 3, // 第四个数据维度控制大小
      min: 0,
      max: 100,
      inRange: {
        symbolSize: [5, 30]
      }
    }
  ],
  series: [{
    type: 'scatter',
    data: [
      [10, 20, 5, 50], // x, y, 颜色值, 大小值
      [20, 30, 8, 80],
      [30, 40, 2, 20],
      // ...更多数据
    ]
  }]
};

视觉映射的性能优化

大数据量下的优化

当处理大量数据时，视觉映射可能会影响性能，可以采取以下优化措施：

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  // 降低采样精度提高性能
  precision: 1,
  // 减少颜色过渡段数
  inRange: {
    color: ['blue', 'green', 'red'],
    colorStops: [
      {offset: 0, color: 'blue'},
      {offset: 0.5, color: 'green'},
      {offset: 1, color: 'red'}
    ]
  },
  // 关闭实时更新
  realtime: false
}

分段型映射的优化

对于分段型映射，合理设置分段数量可以平衡视觉效果和性能。

visualMap: {
  type: 'piecewise',
  splitNumber: 5, // 控制分段数量
  pieces: [
    {min: 0, max: 20},
    {min: 20, max: 40},
    {min: 40, max: 60},
    {min: 60, max: 80},
    {min: 80, max: 100}
  ],
  inRange: {
    color: ['#1e90ff', '#3cb371', '#ffa500', '#ff4500', '#8a2be2']
  }
}

动态数据更新优化

当数据频繁更新时，合理配置视觉映射可以减少不必要的重绘。

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  // 关闭动画
  animation: false,
  // 增加更新阈值
  animationThreshold: 2000,
  inRange: {
    color: ['blue', 'red']
  }
}