数据映射与编码

数据映射与编码的基本概念

数据映射与编码是数据可视化中的核心环节，它将原始数据转换为视觉元素的可视化属性。在ECharts中，数据映射通过视觉通道（如颜色、大小、形状等）将数据值转换为图形属性，而编码则是定义这种转换关系的具体规则。例如，将温度数据映射为颜色渐变，或将销售额映射为柱状图的高度。

// 示例：简单的数据映射
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar',
    itemStyle: {
      color: function(params) {
        // 根据数值大小映射颜色
        return params.value > 100 ? '#c23531' : '#2f4554';
      }
    }
  }]
};

视觉通道与编码类型

ECharts支持多种视觉通道用于数据编码：

1. 位置编码：最基础的编码方式，如直角坐标系中的x/y轴位置
2. 颜色编码：包括色相、饱和度、明度等维度
3. 大小编码：常用于气泡图或柱状图的宽度/高度
4. 形状编码：散点图中不同形状代表不同类别
5. 纹理编码：通过图案填充区分数据

// 示例：多维度编码
option = {
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    symbolSize: function(data) {
      // 大小编码
      return Math.sqrt(data[2]) * 5;
    },
    data: [
      [10, 20, 50],  // 第三个值控制大小
      [15, 30, 100],
      [20, 15, 30]
    ],
    type: 'scatter',
    itemStyle: {
      color: function(params) {
        // 颜色编码
        return params.data[0] > 12 ? '#dd6b66' : '#759aa0';
      }
    }
  }]
};

连续型与分类型数据映射

连续型数据映射

对于数值区间数据，ECharts提供线性、分段、对数等多种映射方式：

// 示例：连续颜色映射
option = {
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    seriesIndex: 0
  },
  series: [{
    type: 'heatmap',
    data: [[0,0,10], [0,1,30], [0,2,70], [0,3,90]]
  }]
};

分类型数据映射

对于离散类别数据，通常采用一一对应的映射方式：

// 示例：类别颜色映射
const categoryMap = {
  'A': '#c12e34',
  'B': '#e6b600',
  'C': '#0098d9'
};

option = {
  series: [{
    type: 'pie',
    data: [
      { value: 335, name: 'A', itemStyle: { color: categoryMap['A'] } },
      { value: 310, name: 'B', itemStyle: { color: categoryMap['B'] } },
      { value: 234, name: 'C', itemStyle: { color: categoryMap['C'] } }
    ]
  }]
};

高级映射技巧

视觉映射组件(visualMap)

ECharts的visualMap组件提供了强大的交互式数据映射能力：

option = {
  visualMap: {
    type: 'piecewise',
    pieces: [
      { min: 1500 }, // 不指定max，表示1500到无穷大
      { min: 900, max: 1500 },
      { min: 310, max: 900 },
      { min: 200, max: 300 },
      { min: 10, max: 200, label: '10到200' },
      { value: 123, label: '123（特殊值）' } // 表示特定值
    ],
    seriesIndex: 0
  },
  series: [{
    type: 'scatter',
    data: [[161.2, 51.6, 200], [167.5, 59.0, 500], ...]
  }]
};

多系列联动映射

实现多个系列共享同一套映射规则：

option = {
  visualMap: {
    dimension: 2,  // 指定数据维度
    min: 0,
    max: 100,
    seriesIndex: [0, 1],  // 同时控制两个系列
    inRange: {
      color: ['blue', 'green', 'yellow', 'red']
    }
  },
  series: [
    { type: 'scatter', data: [...] },
    { type: 'effectScatter', data: [...] }
  ]
};

自定义映射函数

对于复杂映射需求，可以使用回调函数实现完全自定义：

option = {
  series: [{
    type: 'custom',
    renderItem: function(params, api) {
      const value = api.value(2); // 获取第三个维度的值
      const point = api.coord([api.value(0), api.value(1)]);
      
      // 自定义形状和颜色
      const shape = {
        x: point[0],
        y: point[1],
        width: value / 10,
        height: value / 5
      };
      const color = `rgb(${Math.min(255, value * 2)}, 100, 100)`;
      
      return {
        type: 'rect',
        shape: shape,
        style: {
          fill: color
        }
      };
    },
    data: [[10, 20, 50], [15, 30, 100], [20, 15, 30]]
  }]
};

性能优化策略

大数据量下的映射性能优化方法：

1. 使用visualMap代替逐项设置：

// 不推荐写法（性能差）
series: [{
  data: [{
    value: 10,
    itemStyle: { color: getColor(10) }
  }, ...]
}]

// 推荐写法
visualMap: {
  inRange: { color: [...] }
}

2. 启用渐进渲染：

series: [{
  type: 'scatter',
  progressive: 200,  // 每次渲染200个点
  progressiveThreshold: 1000  // 数据量超过1000时启用渐进渲染
}]

3. 使用数据采样：

function sampleData(data, interval) {
  return data.filter((_, idx) => idx % interval === 0);
}

series: [{
  data: sampleData(largeDataSet, 5)  // 每5个点采样1个
}]

动态数据映射更新

实现数据变化时的动态映射更新：

// 初始配置
const option = {
  dataset: { source: [...] },
  series: [{ type: 'bar' }],
  visualMap: {
    min: 0,
    max: 100,
    inRange: { color: [...] }
  }
};

// 数据更新时重新计算映射范围
function updateData(newData) {
  const maxValue = Math.max(...newData.map(item => item.value));
  myChart.setOption({
    dataset: { source: newData },
    visualMap: { max: maxValue }
  });
}

多视图协同映射

实现多个图表视图间的映射联动：

option = {
  grid: [
    { left: '5%', top: '5%', width: '40%', height: '40%' },  // 视图1
    { right: '5%', top: '5%', width: '40%', height: '40%' }   // 视图2
  ],
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    // 两个视图使用相同的visualMap配置
    seriesIndex: [0, 1],
    inRange: { color: ['blue', 'green', 'yellow', 'red'] }
  },
  series: [
    { type: 'scatter', xAxisIndex: 0, yAxisIndex: 0, data: [...] },
    { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, data: [...] }
  ]
};

特殊数据类型映射

时间数据映射

option = {
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: function(value) {
        return echarts.format.formatTime('yyyy-MM-dd', value);
      }
    }
  },
  series: [{
    data: [
      ['2023-01-01', 123],
      ['2023-01-02', 456],
      // ...
    ],
    type: 'line'
  }]
};

地理坐标映射

option = {
  geo: {
    map: 'china',
    roam: true
  },
  series: [{
    type: 'scatter',
    coordinateSystem: 'geo',
    symbolSize: function(val) {
      return val[2] / 10;
    },
    data: [
      { name: '北京', value: [116.46, 39.92, 1000] },
      { name: '上海', value: [121.48, 31.22, 800] }
    ]
  }]
};

交互式映射控制

实现用户交互改变映射规则：

option = {
  visualMap: {
    type: 'continuous',
    range: [0, 100],
    realtime: false,  // 拖动时是否实时更新
    calculable: true,  // 显示拖拽用的手柄
    inRange: { color: [...] }
  },
  series: [...]
};

// 监听visualMap变化事件
myChart.on('visualMapRangeChange', function(params) {
  console.log('映射范围变为:', params.selected);
});