Visual Mapping of ECharts data

Release date：2024-01-24 Update date：2024-01-25 Editor：admin View counts：440

Label：

Visual Mapping of ECharts data

To put it simply, data visualization is to display the data in the form of charts, and the professional expression is the mapping process from data to visual elements.

Each chart in ECharts has this mapping process built into it, and the bar chart we learned earlier is to map data to length.

In addition, ECharts provides visualMap component to provide a common visual mapping. The visualMap visual elements that can be used in the component are

Drawing category
Drawing size
Color
Transparency
Color transparency
ColorLightness)
ColorSaturation)
ColorHue

Data and Dimensions

Data in ECharts, which is generally stored in series.data .

Different chart types have different data formats, but their common feature is the collection of data items (dataItem). Each data item contains data values (value) and other information (optional). Each data value can be a single numerical value (one-dimensional) or an array (multi-dimensional).

The series.data most common form is a linear table, which is a normal array:

series: {
    data: [
        {       // Each item here is a dataItem
            value: 2323, // This is the data value of the data item
            itemStyle: {...}
        },
        1212,   // It can also be directly the value of 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 of the data item（value）
            itemStyle: {...}
        },
        [1212, 5454, 'Vatican'],   // It can also be directly the value of dataItem, which is more common.
        [2323, 3223, 'Nauru'],     // Each value is three-dimensional, and each column is a dimension.
        [4343, 23,   'Tuvalu']    //
If it is a bubble chart, it is common to map the first dimension to the x-axis,
                                 // The second dimension is mapped to the y-axis,
                                 // Mapping the third dimension to bubble radius (symbolSize)
    ]
}

In a chart, it is often defaulted to value map the first one or two dimensions, such as the first dimension to the x-axis and the second dimension to the y-axis. If you want to show more dimensions, you can use visualMap .

`visualMap` module

The visualMap component defines that the specified dimension of the datais mapped to the corresponding visual element.

visualMap : Components can be defined so that multiple dimensions in the data can be visually mapped at the same time.

visualMap components can be defined as segmented (visualMapPiecewise) or continuous (visualMapContinuous) through type to tell the difference. For example:

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

Segmented visual mapping components, there are three modes:

Average segmentation of continuous data: according to visualMap-piecewise.splitNumber the automatic motion is divided into several blocks on average.
Custom segmentation of continuous data: based on visualMap-piecewise.pieces to define each range.
Discrete data is segmented according to categories: categories are defined in visualMap-piecewise.categories .

Configuration of visual mapping mode

visualMap can specify that the specified dimension of the data is mapped 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 [3] is mapped
            seriesIndex: 4,     // Map the fourth series.
            inRange: {          // Visual configuration in the selected range
                color: ['blue', '#121122', 'red'], //
Defined a color list for graphic color mapping,
                                                    //
Map the minimum value of data to 'blue',
                                                    //
Map the maximum value to 'red',
                                                    //
Other automatic linear calculations.
                symbolSize: [30, 100]               //
Defined the mapping range of graphic dimensions,
                                                    //
Map the minimum data value to 30,
                                                    //
Map the maximum value to 100,
                                                    //
Other automatic linear calculations.
            },
            outOfRange: {       // Visual configuration outside the selected range
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};

Example 2

option = {
    visualMap: [
        {
            ...,
            inRange: {          // Visual configuration in the selected range
                colorLightness: [0.2, 1], //
Map to brightness. That is to apply brightness treatment to the original color.
                                          //
The original color may have been selected from the global color palette, and the visualMap component is not concerned.
                symbolSize: [30, 100]
            },
            ...
        },
        ...
    ]
};

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