数据映射与编码

作者：陈川阅读数：52851人阅读分类： ECharts

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

数据映射是将原始数据转换为可视化元素的过程，而编码则是将数据属性映射到视觉通道的具体方法。在ECharts中，数据映射与编码是图表呈现的核心机制，决定了数据如何被视觉化表达。例如，将数值映射为柱状图的高度，或将分类数据映射为不同的颜色。

视觉通道与编码类型

ECharts支持多种视觉通道编码，主要包括：

位置编码：x轴和y轴的位置
大小编码：图形的大小或长度
颜色编码：填充色或边框色
形状编码：点图的标记形状
纹理编码：图形的填充图案

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) {
        // 颜色编码示例
        const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622'];
        return colorList[params.dataIndex];
      }
    }
  }]
};

连续型数据的映射策略

对于连续型数据，ECharts提供了多种映射方式：

线性映射：最常用的映射方式，将数据范围线性映射到视觉通道范围
分段映射：将数据分为若干区间，每个区间采用不同的视觉表现
对数映射：适合数据跨度较大的场景

option = {
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    inRange: {
      color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    }
  },
  series: {
    type: 'scatter',
    data: [
      [10, 20, 30],
      [15, 25, 45],
      [20, 30, 60]
    ]
  }
};

分类型数据的编码方法

处理分类型数据时，需要考虑：

颜色分配：为不同类别分配可区分的颜色
形状区分：在散点图中使用不同形状标记
图例设计：确保图例能清晰表达编码关系

option = {
  legend: {
    data: ['类别A', '类别B', '类别C']
  },
  series: [
    {
      name: '类别A',
      type: 'scatter',
      symbol: 'circle',
      data: [[10, 20], [15, 25]]
    },
    {
      name: '类别B',
      type: 'scatter',
      symbol: 'rect',
      data: [[20, 30], [25, 35]]
    },
    {
      name: '类别C',
      type: 'scatter',
      symbol: 'triangle',
      data: [[30, 40], [35, 45]]
    }
  ]
};

多维度数据的复合编码

当需要同时展示多个数据维度时，可以采用复合编码策略：

位置+颜色：x/y轴表示两个维度，颜色表示第三个维度
大小+颜色：气泡图中同时编码三个维度
动画+时间：通过动画表现时间维度变化

option = {
  dataset: {
    source: [
      ['product', 'sales', 'price', 'category'],
      ['A', 120, 50, 'X'],
      ['B', 200, 100, 'Y'],
      ['C', 150, 80, 'X']
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  visualMap: {
    dimension: 2,
    min: 0,
    max: 100,
    inRange: {
      color: ['#313695', '#4575b4', '#74add1']
    }
  },
  series: {
    type: 'bar',
    encode: {
      x: 'product',
      y: 'sales',
      itemName: 'product',
      tooltip: ['sales', 'price', 'category']
    }
  }
};

自定义映射函数

ECharts允许通过回调函数实现完全自定义的数据映射：

option = {
  series: {
    type: 'pie',
    data: [
      { value: 335, name: 'A' },
      { value: 310, name: 'B' },
      { value: 234, name: 'C' }
    ],
    radius: function(data) {
      // 根据数据值动态计算半径
      return Math.sqrt(data.value) * 2;
    },
    label: {
      formatter: function(params) {
        // 自定义标签格式
        return `${params.name}: ${params.value} (${params.percent}%)`;
      }
    }
  }
};

性能优化的映射技巧

处理大数据量时，映射策略需要考虑性能：

采样策略：对大数据集进行适当采样
聚合映射：将相邻数据点聚合显示
渐进渲染：分批渲染大数据集

option = {
  dataset: {
    source: largeDataSet // 假设这是一个大数据集
  },
  dataZoom: [{
    type: 'inside'
  }],
  series: {
    type: 'scatter',
    progressive: 400,
    progressiveThreshold: 3000,
    dimensions: ['x', 'y', 'value'],
    encode: {
      x: 'x',
      y: 'y',
      tooltip: ['x', 'y', 'value']
    }
  }
};

动态数据更新与映射

ECharts支持动态更新数据并保持映射关系：

const chart = echarts.init(document.getElementById('main'));
let data = [10, 20, 30, 40];

const option = {
  series: [{
    type: 'line',
    data: data
  }]
};

chart.setOption(option);

// 动态更新数据
setInterval(() => {
  data = data.map(v => v + Math.random() * 10 - 5);
  chart.setOption({
    series: [{
      data: data
    }]
  });
}, 1000);

交互式映射调整

通过交互组件动态调整数据映射关系：

option = {
  toolbox: {
    feature: {
      dataZoom: {},
      restore: {},
      saveAsImage: {}
    }
  },
  brush: {
    toolbox: ['rect', 'polygon', 'keep', 'clear'],
    xAxisIndex: 0
  },
  series: {
    type: 'scatter',
    data: [
      [10, 20], [15, 25], [20, 30], [25, 35]
    ],
    encode: {
      x: 0,
      y: 1
    }
  }
};

主题与全局映射配置

通过主题配置统一管理全局映射规则：

// 注册主题
echarts.registerTheme('myTheme', {
  color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53'],
  visualMap: {
    inRange: {
      colorLightness: [0.2, 0.8]
    }
  }
});

// 使用主题
const chart = echarts.init(document.getElementById('main'), 'myTheme');
chart.setOption({
  series: {
    type: 'pie',
    data: [
      { value: 335, name: 'A' },
      { value: 310, name: 'B' }
    ]
  }
});

地理数据的特殊映射

处理地理数据时需要特殊映射考虑：

经纬度映射：将地理坐标映射到平面坐标系
区域编码：为不同行政区域分配视觉属性
热力图映射：密度数据的可视化表现

option = {
  geo: {
    map: 'china',
    roam: true,
    emphasis: {
      itemStyle: {
        areaColor: '#f00'
      }
    }
  },
  series: {
    type: 'scatter',
    coordinateSystem: 'geo',
    data: [
      { name: '北京', value: [116.46, 39.92, 100] },
      { name: '上海', value: [121.48, 31.22, 80] }
    ],
    symbolSize: function(val) {
      return val[2] / 5;
    }
  }
};

时间序列数据的映射

时间数据的特殊处理方式：

时间轴映射：将时间数据映射到x/y轴
动画表现：通过动画展示时间变化
周期性编码：处理周期性时间模式

option = {
  dataset: {
    source: [
      ['2023-01', 100],
      ['2023-02', 200],
      ['2023-03', 150]
    ]
  },
  xAxis: {
    type: 'time',
    axisLabel: {
      formatter: '{yyyy}-{MM}'
    }
  },
  yAxis: { type: 'value' },
  series: {
    type: 'line',
    encode: {
      x: 0,
      y: 1
    }
  }
};

多维数据的平行坐标系

使用平行坐标系展示高维数据：

option = {
  parallelAxis: [
    { dim: 0, name: 'Price' },
    { dim: 1, name: 'Weight' },
    { dim: 2, name: 'Rating' }
  ],
  series: {
    type: 'parallel',
    data: [
      [12, 34, 5.6],
      [23, 45, 7.8],
      [34, 56, 2.3]
    ],
    lineStyle: {
      width: 2
    }
  }
};

树形数据的层次映射

层次化数据的可视化策略：

树图：展示父子关系
旭日图：展示多层次占比
矩形树图：展示层次和数量

option = {
  series: {
    type: 'tree',
    data: [{
      name: 'Root',
      children: [
        { name: 'A', value: 10 },
        { name: 'B', children: [
          { name: 'B1', value: 5 }
        ]}
      ]
    }],
    symbolSize: function(data) {
      return data.value ? data.value * 2 : 7;
    }
  }
};

关系网络图的映射

网络关系数据的编码方法：

节点大小：映射节点重要性
连线粗细：映射关系强度
颜色分组：区分不同类别

option = {
  series: {
    type: 'graph',
    data: [
      { name: 'A', value: 100 },
      { name: 'B', value: 80 }
    ],
    links: [
      { source: 'A', target: 'B', value: 5 }
    ],
    categories: [
      { name: 'Category1' }
    ],
    symbolSize: function(data) {
      return Math.sqrt(data.value) * 2;
    }
  }
};

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：地理数据处理

下一篇：枚举类型的使用与限制