Echarts Visualmap

ECharts Data Visual Mapping

Data visualization, simply put, is the process of presenting data in the form of charts. A more professional way to describe it is the mapping process from data to visual elements.

Each type of chart in ECharts inherently includes this mapping process. For example, the bar chart we learned earlier maps data to length.

Additionally, ECharts provides the visualMap component for general visual mapping. The visual elements available in the visualMap component include:

Symbol type (symbol)
Symbol size (symbolSize)
Color (color)
Opacity (opacity)
Color alpha (colorAlpha)
Color lightness (colorLightness)
Color saturation (colorSaturation)
Color hue (colorHue)

Data and Dimensions

Data in ECharts is typically stored in series.data.

Different chart types have different data formats, but they all share the common characteristic of being a collection of data items (dataItem). Each data item contains a data value (value) and other optional information. Each data value can be a single number (one-dimensional) or an array (multi-dimensional).

The most common form of series.data is a linear list, i.e., a regular array:

series:{
    data:[
        {// Each item here is a dataItem
            value: 2323, // This is the data value (value) of the dataItem
            itemStyle: {...}
        },
        1212, // It can also directly be the value of the dataItem, which is more common.
        2323, // Each value is 'one-dimensional'.
        4343,
        3434
    ]
}

series:{
    data:[
        {// Each item here is a dataItem
            value: [3434, 129, 'San Marino'], // This is the data value (value) of the dataItem
            itemStyle: {...}
        },
        [1212, 5454, 'Vatican'], // It can also directly be the value of the dataItem, which is more common.
        [2323, 3223, 'Nauru'], // Each value is 'three-dimensional', each column is a dimension.
        [4343, 23, 'Tuvalu'] // If it's a 'bubble chart', typically the first dimension maps to the x-axis,
                             // the second dimension maps to the y-axis,
                             // and the third dimension maps to the bubble radius (symbolSize)
    ]
}

In charts, the first one or two dimensions of the value are typically mapped by default. For example, the first dimension is mapped to the x-axis, and the second dimension is mapped to the y-axis. If you want to display more dimensions, you can use the visualMap component.

visualMap Component

The visualMap component defines the mapping of a specified dimension of the data to the corresponding visual element.

Multiple visualMap components can be defined, allowing for simultaneous visual mapping of multiple dimensions in the data.

The visualMap component can be defined as piecewise (visualMapPiecewise) or continuous (visualMapContinuous), distinguished by the type property. For example:

option = {
    visualMap: [
        {// First visualMap component
            type: 'continuous', // Defined as a continuous visualMap
            ...
        },
        {// Second visualMap component
            type: 'piecewise', // Defined as a piecewise visualMap
            ...
        }
    ],
    ...
};

The piecewise visual mapping component has three modes:

Continuous data segmented evenly: Automatically divided into several blocks based on visualMap-piecewise.splitNumber.
Continuous data segmented customly: The range of each block is defined based on visualMap-piecewise.pieces.
Discrete data segmented by category: Categories are defined in visualMap-piecewise.categories.

The display form of the piecewise visual mapping component is shown in the following image:

Configuration of Visual Mapping Methods

In visualMap, you can specify which dimension of the data maps to the corresponding visual element.

Example 1

option = {
    visualMap: [
        {
            type: 'piecewise',
            min: 0,
            max: 5000,
            dimension: 3, // The fourth dimension of series.data (i.e., value) is mapped
            seriesIndex: 4, // Mapping is applied to the fourth series.
            inRange: { // Visual configuration within the selected range
                color: ['blue', '#121122', 'red'], // Defines the color list for color mapping.
                                                  // The minimum data value maps to 'blue',
                                                  // the maximum maps to 'red',
                                                  // and the rest are calculated linearly automatically.
                symbolSize: [30, 100] // Defines the range for symbol size mapping.
                                      // The minimum data value maps to 30,
                                      // the maximum maps to 100,
                                      // and the rest are calculated linearly automatically.
            },
            outOfRange: { // Visual configuration outside the selected range
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};

Example 2

option = {
    visualMap: [
        {
            ...,
            inRange: { // Visual configuration within the selected range
                colorLightness: [0.2, 1], // Maps to lightness. This applies lightness processing to the original color.
                                          // The original color might be selected from the global color palette, which the visualMap component does not care about.
                symbolSize: [30, 100]
            },
            ...
        },
        ...
    ]
};

For more details, see visualMap.inRange and visualMap.outOfRange.

YouTip