Source: official website, organize their own
Data visualization data mapping process to visual elements (the encoding process can also be referred to as a visual, the visual elements may also be referred to as a visual channel) .
Each chart ECharts itself built this mapping process, such as a line chart that maps the data to the "line" histogram data are mapped to the "length." Some of the more complex charts, such as graph, 事件河流图, treemapwill also make their built-in map.
In addition, ECharts also provided visualMap components to provide a common visual mapping . visualMap Assembly visual elements can be used 图形类别（symbol）are: 图形大小（symbolSize）颜色（color）, 透明度（opacity）, 颜色透明度（colorAlpha）, 颜色明暗度（colorLightness）, 颜色饱和度（colorSaturation）, ,色调（colorHue）
Next, visualMap use of the components described briefly.
Data and Dimension
ECharts the data, typically stored in series.data in. Depending on the chart type, the specific form of data may be slightly different. For example, it might be "linear form", "tree", "map" and so on. But they all have one thing in common: a collection of all "items (dataItem)." Each data item contains a "data value (value)" and other information (if required). Each data value may be a single value (one-dimensional) array, or a (multidimensional).
For example, series.data most common form, is "linear form", namely a common array:
series: { data: [ { // 这里每一个项就是数据项（dataItem） value: 2323, // 这是数据项的数据值（value） itemStyle: {...} }, 1212, // 也可以直接是 dataItem 的 value，这更常见。 2323, // 每个 value 都是『一维』的。 4343, 3434 ] }series: { data: [ { // 这里每一个项就是数据项（dataItem） value: [3434, 129, '圣马力诺'], // 这是数据项的数据值（value） itemStyle: {...} }, [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value，这更常见。 [2323, 3223, '瑙鲁'], // 每个 value 都是『三维』的，每列是一个维度。 [4343, 23, '图瓦卢'] // 假如是『气泡图』，常见第一维度映射到x轴， // 第二维度映射到y轴， // 第三维度映射到气泡半径（symbolSize） ] }
In the graph, often the default value of the previous two dimensions are mapped, such as taking the first dimension is mapped to the x-axis, the second dimension is mapped to take the y-axis. If you want to show up more dimensions, you can helpvisualMap.
visualMap components
visualMap component defines the data "which dimension" mapped to "on what visual elements."
Now provides the following two types of components visualMap by visualMap.type distinguished.
Its definition structure example:
option = { visualMap: [ // 可以同时定义多个 visualMap 组件。 { // 第一个 visualMap 组件 type: 'continuous', // 定义为连续型 viusalMap ... }, { // 第二个 visualMap 组件 type: 'piecewise', // 定义为分段型 visualMap ... } ], ... };
连续型（visualMapContinuous）
分段型（visualMapPiecewise）
Segment type visual mapping assembly (visualMapPiecewise), there are three modes:
- Average continuous data segments: based visualMap-piecewise.splitNumber automatically evenly divided into several blocks.
- Custom continuous data segment: based visualMap-piecewise.pieces to define each range.
- Discrete data (category data): class definitions in visualMap-piecewise.categories in.
Configuring visual mapping approach
Since it is a "data" mapping "visual elements", and visualMap you can specify the data "which dimension" (see visualMap.dimension ) which is mapped to the "visual elements" (see visualMap.inRange and visualMap.outOfRange ) in.
Example One:
option = { visualMap: [ { type: 'piecewise' min: 0, max: 5000, dimension: 3, // series.data 的第四个维度（即 value[3]）被映射 seriesIndex: 4, // 对第四个系列进行映射。 inRange: { // 选中范围中的视觉配置 color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表， // 数据最小值映射到'blue'上， // 最大值映射到'red'上， // 其余自动线性计算。 symbolSize: [30, 100] // 定义了图形尺寸的映射范围， // 数据最小值映射到30上， // 最大值映射到100上， // 其余自动线性计算。 }, outOfRange: { // 选中范围外的视觉配置 symbolSize: [30, 100] } }, ... ] };Example Two:
option = { visualMap: [ { ..., inRange: { // 选中范围中的视觉配置 colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。 // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。 symbolSize: [30, 100] }, ... }, ... ] };For more details, see visualMap.inRange and visualMap.outOfRange .