ECharts Dataset (dataset)

ECharts uses dataset to manage data.

The dataset component is used for separate data declaration, allowing data to be managed independently, reused by multiple components, and enabling data-to-visual mapping based on the data.

Below is the simplest example of dataset:

Alternatively, the common object array format can also be used:

Mapping from data to graphics

We can map data to graphics in the configuration item.

We can use the series.seriesLayoutBy attribute to configure whether the dataset maps columns or rows to the graphic series. By default, it maps by columns.

In the following example, we will use the seriesLayoutBy property to configure whether data is displayed by columns or by rows.

The data described by common charts is mostly in a "two-dimensional table" structure. We can use the series.encode property to map the corresponding data to axes (such as X and Y axes):

The basic structure of the encode declaration is as follows, where the left side of the colon is the specific name of the coordinate system, label, etc., such as 'x', 'y', 'tooltip', etc., and the right side of the colon is the dimension name in the data (string format) or the dimension index (number format, counting from 0). One or more dimensions can be specified (using an array). In general, not all of the information below needs to be written; write it as needed.

The following are the properties supported by encode:

// 在任何坐标系和系列中，都支持：
encode: {
    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
    tooltip: ['product', 'score']
    // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
    seriesName: [1, 3],
    // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
    itemId: 2,
    // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
    itemName: 3
}

// 直角坐标系（grid/cartesian）特有的属性：
encode: {
    // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
    x: [1, 5, 'score'],
    // 把“维度0”映射到 Y 轴。
    y: 0
}

// 单轴（singleAxis）特有的属性：
encode: {
    single: 3
}

// 极坐标系（polar）特有的属性：
encode: {
    radius: 3,
    angle: 2
}

// 地理坐标系（geo）特有的属性：
encode: {
    lng: 3,
    lat: 2
}

// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
    value: 3
}

More encode examples:

Mapping of visual channels (color, size, etc.)

We can use the visualMap component to map visual channels.

Visual elements can be:

• symbol: The graphic shape of the graphic element.
• symbolSize: the size of the graphic element.
• color: the color of the graphic element.
• colorAlpha: The transparency of the color of the graphic element.
• opacity: The transparency of the graphic element and its accessories (such as text labels).
• colorLightness: the lightness of the color.
• colorSaturation: the saturation of the color.
• colorHue: the hue of the color.

Multiple visualMap components can be defined, allowing visual mapping of multiple dimensions in the data at the same time.

Interactive Linkage

In the following example, multiple charts share a single dataset, with linked interactions: