Data mapping and encoding

Author：Chuan Chen 阅读数：52852人阅读分类： ECharts

Basic Concepts of Data Mapping and Encoding

Data mapping is the process of transforming raw data into visual elements, while encoding refers to the specific methods of mapping data attributes to visual channels. In ECharts, data mapping and encoding are the core mechanisms of chart presentation, determining how data is visually expressed. For example, mapping numerical values to the height of a bar chart or mapping categorical data to different colors.

Visual Channels and Encoding Types

ECharts supports various visual channel encodings, including:

Position Encoding: Position on the x-axis and y-axis
Size Encoding: Size or length of graphical elements
Color Encoding: Fill color or border color
Shape Encoding: Marker shapes in scatter plots
Texture Encoding: Fill patterns for graphical elements

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) {
        // Example of color encoding
        const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622'];
        return colorList[params.dataIndex];
      }
    }
  }]
};

Mapping Strategies for Continuous Data

For continuous data, ECharts provides multiple mapping methods:

Linear Mapping: The most common method, linearly mapping data ranges to visual channel ranges
Segmented Mapping: Dividing data into intervals, each with distinct visual representations
Logarithmic Mapping: Suitable for scenarios with large data spans

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]
    ]
  }
};

Encoding Methods for Categorical Data

When handling categorical data, consider:

Color Allocation: Assigning distinguishable colors to different categories
Shape Differentiation: Using different marker shapes in scatter plots
Legend Design: Ensuring legends clearly express encoding relationships

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

Composite Encoding for Multi-Dimensional Data

When displaying multiple data dimensions simultaneously, composite encoding strategies can be employed:

Position + Color: Using x/y axes for two dimensions and color for a third
Size + Color: Encoding three dimensions in bubble charts
Animation + Time: Representing temporal changes through animation

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']
    }
  }
};

Custom Mapping Functions

ECharts allows fully customized data mapping through callback functions:

option = {
  series: {
    type: 'pie',
    data: [
      { value: 335, name: 'A' },
      { value: 310, name: 'B' },
      { value: 234, name: 'C' }
    ],
    radius: function(data) {
      // Dynamically calculate radius based on data value
      return Math.sqrt(data.value) * 2;
    },
    label: {
      formatter: function(params) {
        // Custom label format
        return `${params.name}: ${params.value} (${params.percent}%)`;
      }
    }
  }
};

Performance Optimization Techniques for Mapping

When handling large datasets, mapping strategies must consider performance:

Sampling Strategy: Appropriately sampling large datasets
Aggregation Mapping: Aggregating adjacent data points for display
Progressive Rendering: Rendering large datasets in batches

option = {
  dataset: {
    source: largeDataSet // Assume this is a large dataset
  },
  dataZoom: [{
    type: 'inside'
  }],
  series: {
    type: 'scatter',
    progressive: 400,
    progressiveThreshold: 3000,
    dimensions: ['x', 'y', 'value'],
    encode: {
      x: 'x',
      y: 'y',
      tooltip: ['x', 'y', 'value']
    }
  }
};

Dynamic Data Updates and Mapping

ECharts supports dynamic data updates while maintaining mapping relationships:

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

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

chart.setOption(option);

// Dynamically update data
setInterval(() => {
  data = data.map(v => v + Math.random() * 10 - 5);
  chart.setOption({
    series: [{
      data: data
    }]
  });
}, 1000);

Interactive Mapping Adjustments

Adjust data mapping relationships dynamically through interactive components:

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
    }
  }
};

Themes and Global Mapping Configuration

Manage global mapping rules uniformly through theme configurations:

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

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

Special Mapping for Geographic Data

Special considerations for geographic data mapping:

Latitude-Longitude Mapping: Mapping geographic coordinates to planar coordinate systems
Region Encoding: Assigning visual properties to different administrative regions
Heatmap Mapping: Visualizing density data

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

Mapping for Time Series Data

Special handling methods for temporal data:

Timeline Mapping: Mapping time data to x/y axes
Animation Representation: Showing temporal changes through animation
Periodic Encoding: Handling periodic temporal patterns

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
    }
  }
};

Parallel Coordinates for Multi-Dimensional Data

Using parallel coordinates to display high-dimensional data:

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
    }
  }
};

Hierarchical Mapping for Tree Data

Visualization strategies for hierarchical data:

Tree Charts: Displaying parent-child relationships
Sunburst Charts: Showing multi-level proportions
Treemaps: Representing hierarchies and quantities

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;
    }
  }
};

Mapping for Relationship Network Graphs

Encoding methods for network relationship data:

Node Size: Mapping node importance
Edge Thickness: Mapping relationship strength
Color Grouping: Differentiating categories

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

上一篇：地理数据处理

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