数据的视觉映射

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

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 上编辑此页

KrzysztofMadejskipissang pissang