数据的视觉映射
数据可视化是数据到视觉元素的映射过程。这个过程也常被称为视觉编码，视觉元素亦可称为视觉通道。
Apache EChartsTM 的每种图表都内置了这种映射过程。例如，折线图将数据映射为线，柱状图将数据映射为高度。一些更复杂的图表，如 graph（关系图）、themeRiver（主题河流图）和 treemap（矩形树图），都有其独特的内置映射。
除此之外，ECharts 还提供了 visualMap 组件 用于通用的视觉映射。visualMap 组件中允许的视觉元素有：
symbol（图形）、symbolSize（图形大小）color（颜色）、opacity（透明度）、colorAlpha（颜色的 Alpha 通道）colorLightness（颜色的明暗度）、colorSaturation（颜色的饱和度）、colorHue（颜色的色调）
接下来，我们将介绍如何使用 visualMap 组件。
数据和维度
在 ECharts 中，数据通常存储在 series.data 中。根据图表类型（如列表、树、图等）的不同，数据的形式可能会有所差异。但它们有一个共同的特点，即它们都是数据项的集合。每个数据项都包含数据值，以及根据需要包含的其他信息。每个数据值可以是单个值（一维）或一个数组（多维）。
例如，series.data 是最常见的形式，它是一个列表，即一个普通的数组：
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 组件定义了从数据的哪个维度到何种视觉元素的映射。
ECharts 支持以下两种类型的 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 指定了数据的哪个维度将被进行视觉映射。
分段型视觉映射
分段型视觉映射组件有三种模式。
- 连续数据平均分段：基于 visualMap-piecewise.splitNumber 将数据自动平均切分成若干块。
- 连续数据自定义分段：基于 visualMap-piecewise.pieces 定义每个分段的范围。
- 离散数据（类别数据）：类别在 visualMap-piecewise.categories 中定义。
要使用分段型视觉映射，你需要将 type 设置为 'piecewise'，并选择上述三种配置项之一。