视觉映射(VisualMap)

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

视觉映射是ECharts中用于将数据值映射到视觉元素（如颜色、大小、透明度等）的组件。它允许用户通过直观的视觉编码方式理解数据分布和变化趋势。视觉映射通常用于热力图、散点图、地图等需要展示数据连续变化的场景。

视觉映射的核心思想是将数值域（data domain）映射到视觉域（visual domain）。例如，将[0, 100]的数值范围映射到['#000','#fff']的颜色渐变，或者将[10, 50]映射到[5, 20]的圆点大小范围。

视觉映射的类型

ECharts提供了两种主要的视觉映射类型：

1. 连续型视觉映射(continuous)：适用于连续数值数据
2. 分段型视觉映射(piecewise)：适用于离散分类数据

连续型视觉映射示例

option = {
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    calculable: true
  },
  series: [{
    type: 'scatter',
    data: [[12, 23, 45], [34, 56, 78], [56, 78, 90]]
  }]
};

分段型视觉映射示例

option = {
  visualMap: {
    type: 'piecewise',
    pieces: [
      {min: 0, max: 50, label: '0-50', color: '#93CE07'},
      {min: 50, max: 100, label: '50-100', color: '#FBDB0F'},
      {min: 100, max: 150, label: '100-150', color: '#FC7D02'}
    ]
  },
  series: [{
    type: 'scatter',
    data: [[12, 23, 45], [34, 56, 78], [56, 78, 120]]
  }]
};

视觉映射的配置项详解

视觉映射提供了丰富的配置选项，可以精确控制数据到视觉元素的映射关系：

基本配置

• type: 指定视觉映射类型（'continuous'或'piecewise'）
• min/max: 定义数据范围
• dimension: 指定数据维度的索引
• seriesIndex: 指定关联的系列索引

视觉通道配置

视觉映射支持多种视觉通道的映射：

1. 颜色映射：

inRange: {
  color: ['#121122', 'rgba(3,4,5,0.4)', 'red']
}

2. 大小映射：

inRange: {
  symbolSize: [10, 70]
}

3. 透明度映射：

inRange: {
  opacity: [0.3, 1]
}

4. 符号类型映射：

inRange: {
  symbol: ['circle', 'rect', 'diamond']
}

交互配置

视觉映射组件支持丰富的交互功能：

visualMap: {
  // 显示拖动手柄
  calculable: true,
  // 实时更新
  realtime: true,
  // 方向（水平或垂直）
  orient: 'horizontal',
  // 位置
  left: 'right',
  top: 'bottom'
}

视觉映射的高级应用

多维度视觉映射

ECharts支持对多个数据维度同时进行视觉映射：

option = {
  visualMap: [
    {
      type: 'continuous',
      dimension: 0,
      inRange: {
        color: ['red', 'blue']
      }
    },
    {
      type: 'continuous',
      dimension: 1,
      inRange: {
        symbolSize: [10, 40]
      }
    }
  ],
  series: [{
    type: 'scatter',
    data: [[12, 23, 45], [34, 56, 78], [56, 78, 90]]
  }]
};

自定义映射函数

对于更复杂的映射需求，可以使用formatter自定义映射逻辑：

visualMap: {
  type: 'continuous',
  formatter: function (value) {
    return '数值：' + value.toFixed(2);
  },
  inRange: {
    color: function(value) {
      return value > 50 ? '#ff0000' : '#0000ff';
    }
  }
}

视觉映射与数据缩放

视觉映射可以与数据缩放（dataZoom）组件配合使用，实现动态范围调整：

option = {
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: 0
    }
  ],
  visualMap: {
    type: 'continuous',
    dimension: 2,
    min: 0,
    max: 100,
    inRange: {
      color: ['blue', 'green', 'yellow', 'red']
    }
  },
  series: [{
    type: 'scatter',
    data: [...]
  }]
};

视觉映射在不同图表中的应用

在地图中的应用

视觉映射常用于地图中展示区域数据：

option = {
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#e0f3f8', '#abd9e9', '#74add1', '#4575b4', '#313695']
    }
  },
  series: [{
    type: 'map',
    map: 'china',
    data: [
      {name: '北京', value: 80},
      {name: '上海', value: 90},
      {name: '广东', value: 70}
    ]
  }]
};

在热力图中的应用

热力图是视觉映射的典型应用场景：

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],
      [1, 0, 4], [1, 1, 2], [1, 2, 8],
      [2, 0, 6], [2, 1, 9], [2, 2, 1]
    ]
  }]
};

在散点图中的应用

散点图常用视觉映射展示多维度数据：

option = {
  visualMap: [
    {
      type: 'continuous',
      dimension: 2,
      min: 0,
      max: 100,
      inRange: {
        color: ['blue', 'red']
      }
    },
    {
      type: 'continuous',
      dimension: 3,
      min: 0,
      max: 50,
      inRange: {
        symbolSize: [5, 30]
      }
    }
  ],
  series: [{
    type: 'scatter',
    dimensions: ['x', 'y', 'value', 'size'],
    data: [
      [10, 20, 30, 15],
      [15, 25, 70, 25],
      [20, 30, 50, 40]
    ]
  }]
};

视觉映射的性能优化

当处理大规模数据时，视觉映射可能会影响性能。以下是一些优化建议：

1. 减少视觉通道数量：只映射必要的视觉属性
2. 使用离散映射：对于大数据集，分段型映射比连续型性能更好
3. 限制数据范围：设置合理的min/max值
4. 关闭实时更新：设置realtime: false

// 优化后的配置示例
visualMap: {
  type: 'piecewise',
  categories: ['低', '中', '高'],
  inRange: {
    color: ['#1e90ff', '#ffa500', '#ff4500']
  },
  realtime: false,
  splitNumber: 5  // 减少分段数量
}

视觉映射的样式定制

ECharts允许深度定制视觉映射组件的样式：

控制器样式

visualMap: {
  type: 'continuous',
  // 控制器背景
  backgroundColor: '#ccc',
  // 文本样式
  textStyle: {
    color: '#333',
    fontSize: 12
  },
  // 手柄样式
  handleStyle: {
    color: '#fff',
    borderColor: '#666'
  },
  // 指示器样式
  indicatorStyle: {
    color: '#999'
  }
}

图例样式

visualMap: {
  type: 'piecewise',
  // 图例位置
  left: 'center',
  top: 'top',
  // 图例项样式
  itemGap: 10,
  itemWidth: 20,
  itemHeight: 14,
  // 图例文本格式
  formatter: function (value) {
    return '范围: ' + value;
  }
}

视觉映射的交互事件

ECharts为视觉映射提供了丰富的事件支持：

myChart.on('selectchanged', function(params) {
  console.log('选择范围变化:', params.selected);
});

myChart.on('highlight', function(params) {
  console.log('高亮:', params.dataIndex);
});

myChart.on('lowlight', function(params) {
  console.log('取消高亮:', params.dataIndex);
});

// 编程式控制
myChart.dispatchAction({
  type: 'selectDataRange',
  visualMapIndex: 0,
  selected: [20, 50]
});

视觉映射与主题的结合

视觉映射可以与ECharts主题系统无缝集成：

// 注册自定义主题
echarts.registerTheme('myTheme', {
  visualMap: {
    inRange: {
      color: ['#ffc0cb', '#800080']
    },
    textStyle: {
      color: '#fff'
    }
  }
});

// 应用主题
var myChart = echarts.init(dom, 'myTheme');

视觉映射的响应式设计

视觉映射可以配合响应式配置适应不同屏幕尺寸：

option = {
  visualMap: {
    type: 'continuous',
    orient: window.innerWidth > 500 ? 'horizontal' : 'vertical',
    left: window.innerWidth > 500 ? 'right' : 'center',
    top: window.innerWidth > 500 ? 'bottom' : 'top'
  }
};

window.addEventListener('resize', function() {
  myChart.setOption({
    visualMap: {
      orient: window.innerWidth > 500 ? 'horizontal' : 'vertical'
    }
  });
});