❮ Echarts Dataset Echarts Events ❯

ECharts Data Visual Mapping

Data visualization, in simple terms, involves representing data in graphical form. More technically, it is the process of mapping data to visual elements.

Each chart type 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 that can be used in the visualMap component include:

Symbol type (symbol)
Symbol size (symbolSize)
Color (color)
Opacity (opacity)
Color opacity (colorAlpha)
Color lightness (colorLightness)
Color saturation (colorSaturation)
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 characteristic of being collections of data items (dataItem). Each data item contains a data value (value) and optional additional 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, which is a simple array:

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

In charts, the first one or two dimensions of the value are often mapped by default, such as the first dimension to the x-axis and the second dimension to the y-axis. To display more dimensions, you can use visualMap.

visualMap Component

The visualMap component defines the mapping of specified dimensions of data to corresponding visual elements.

Multiple visualMap components can be defined to map multiple dimensions of data simultaneously.

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

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

The piecewise visual mapping component has three modes:

Continuous data evenly segmented: Automatically divided into several blocks based on visualMap-piecewise.splitNumber.
Continuous data custom segmented: Defined by visualMap-piecewise.pieces.
Discrete data segmented by category: Categories defined in visualMap-piecewise.categories.

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

Example

Configuration of Visual Mapping Methods

In visualMap, you can specify which dimensions of data are mapped to corresponding visual elements.

Example 1

option = {
    visualMap: [
        {
            type: 'piecewise',
            min: 0,
            max: 5000,
            dimension: 3,       // The fourth dimension of series.data (i.e., value[3]) is mapped
            seriesIndex: 4,     // Maps to the fourth series.
            inRange: {          // Visual configuration within the selected range
                color: ['blue', '#121122', 'red'], // Defines the color list for graphic color mapping,
                                                      // The minimum value maps to 'blue',
                                                      // The maximum value maps to 'red',
                                                      // Others are calculated linearly.
                symbolSize: [30, 100]               // Defines the mapping range for graphic size,
                                                      // The minimum value maps to 30,
                                                      // The maximum value maps to 100,
                                                      // Others are calculated linearly.
            },
            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 processes the original color for lightness.
                                            // The original color might be selected from the global color palette, which the visualMap component does not concern.
                symbolSize: [30, 100]
            },
            ...
        },
        ...
    ]
};

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

❮ Echarts Dataset Echarts Events ❯