9.10. Visual Mapping of ECharts data

9.10.1. 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 .

9.10.2. 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 .

9.10.3. Configuration of visual mapping mode ¶

visualMap can specify that the specified dimension of the data is mapped to the corresponding visual element.

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] } }, ... ] }; 

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] }, ... }, ... ] };