数据的视觉映射

数据可视化是将数据映射到可视元素的过程。此过程也可以称为视觉编码，而可视元素也可以称为视觉通道。

Apache EChartsTM 中的每种类型的图表都具有此内置映射过程。例如，折线图将数据映射到线中，柱状图将数据映射到高度中。一些更复杂的图表，如 graph、themeRiver 和 treemap 具有自己的内置映射。

此外，ECharts 提供了 visualMap 组件，用于通用的视觉映射。visualMap 组件中允许的视觉元素有

  • symbol、symbolSize
  • color、opacity、colorAlpha、
  • colorLightness、colorSaturation、colorHue

接下来，我们将介绍如何使用 visualMap 组件。

数据和维度

数据通常存储在 ECharts 中的 series.data 中。根据图表类型（例如列表、树形图、图形等），数据的形式可能会有些不同。但它们有一个共同的特点，即它们是数据项的集合。每个数据项都包含数据值，以及其他所需信息。每个数据值可以是单个值（一维）或数组（多维）。

例如，series.data 是最常见的形式，它是一个 list，一个常见的数组

series: {
  data: [
    {
      // every item here is a dataItem
      value: 2323, // this is data value
      itemStyle: {}
    },
    1212, // it can also be a value of dataItem, which is a more common case
    2323, // every data value here is one dimension
    4343,
    3434
  ];
}
series: {
  data: [
    {
      // every item here is a dataItem
      value: [3434, 129, 'San Marino'], // this is data value
      itemStyle: {}
    },
    [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case
    [2323, 3223, 'Nauru'], // every data value here is three dimension
    [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,
    // the second dimension to y axis,
    // and the third dimension to symbolSize
  ];
}

通常，前一或两个维度用于映射。例如，将第一个维度映射到 x 轴，将第二个维度映射到 y 轴。如果您想表示更多维度，则需要 visualMap。最有可能的是，散点图 使用半径来表示第三个维度。

visualMap 组件

visualMap 组件定义了从 数据的哪个维度 到 哪些视觉元素 的映射。

支持以下两种类型的 visualMap 组件，使用 visualMap.type 标识。

其结构定义为

option = {
  visualMap: [
    // can define multiple visualMap components at the same time
    {
      // the first visualMap component
      type: 'continuous' // defined as continuous visualMap
      // ...
    },
    {
      // the second visualMap component
      type: 'piecewise' // defined as discrete visualMap
      // ...
    }
  ]
  // ...
};

连续和分段视觉映射组件

ECharts 的视觉映射组件分为连续 (visualMapContinuous) 和分段 (visualMapPiecewise)。

连续表示用于视觉映射的数据维度是连续值，而分段表示数据被划分为多个段或离散数据。

连续视觉映射

连续类型视觉映射可以通过指定最大值和最小值来确定视觉映射的范围。

option = {
  visualMap: [
    {
      type: 'continuous',
      min: 0,
      max: 5000,
      dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped
      seriesIndex: 4, // The fourth series is mapped.
      inRange: {
        // The visual configuration in the selected range
        color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping
        // the minimum value of the data is mapped to 'blue', and
        // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.
        // The rest is automatically calculated linearly.
        symbolSize: [30, 100] // Defines the mapping range for the graphic size.
        // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.
        // The maximum value is mapped to 100.
        // The rest is calculated linearly automatically.
      },
      outOfRange: {
        // Check the out of range visual configuration
        symbolSize: [30, 100]
      }
    }
    // ...
  ]
};

其中 visualMap.inRange 表示用于数据映射范围内的数据的样式；而 visualMap.outOfRange 指定映射范围外数据的样式。

visualMap.dimension 指定数据的哪个维度将被视觉映射。

分段视觉映射

分段视觉映射组件有三种模式。

要使用分段视觉映射，您需要将 type 设置为 'piecewise'，并选择以上三个配置项之一。

贡献者 在 GitHub 上编辑此页面

KrzysztofMadejski KrzysztofMadejskipissang pissang