ECharts Conjunto de datos (dataset)

ECharts utiliza dataset para gestionar datos.

El componente dataset se utiliza para declarar conjuntos de datos por separado, de modo que los datos puedan gestionarse de forma independiente, reutilizarse por múltiples componentes y, con base en los datos, especificar el mapeo de datos a visual.

A continuación se muestra un ejemplo muy simple de dataset:

O también se puede usar el formato común de array de objetos:

Mapeo de datos a gráficos

Podemos mapear los datos a los gráficos en el elemento de configuración.

Podemos usar la propiedad series.seriesLayoutBy para configurar si el dataset se mapea como columnas o filas a las series de gráficos; por defecto, se mapea por columnas.

En el siguiente ejemplo, configuraremos mediante la propiedad seriesLayoutBy si los datos se muestran por columnas o por filas.

Los datos descritos por los gráficos comunes suelen tener una estructura de 'tabla bidimensional'. Podemos usar la propiedad series.encode para mapear los datos correspondientes a los ejes (como los ejes X e Y):

La estructura básica de la declaración de encode es la siguiente: a la izquierda de los dos puntos están los nombres específicos como sistema de coordenadas, etiquetas, etc., por ejemplo 'x', 'y', 'tooltip'; a la derecha de los dos puntos está el nombre de la dimensión en los datos (formato string) o el índice de la dimensión (formato number, contando desde 0). Se puede especificar una o más dimensiones (usando un array). Normalmente, no es necesario escribir toda la información siguiente; basta con escribirla según sea necesario.

A continuación se muestran las propiedades admitidas por 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
}

Más ejemplos de encode:

Mapeo de canales visuales (color, tamaño, etc.)

Podemos usar el componente visualMap para realizar el mapeo de canales visuales.

Los elementos visuales pueden ser:

• symbol: la categoría de forma del elemento gráfico.
• symbolSize: el tamaño del elemento gráfico.
• color: el color del elemento gráfico.
• colorAlpha: la transparencia del color del elemento gráfico.
• opacity: la transparencia del elemento gráfico y sus accesorios (como las etiquetas de texto).
• colorLightness: la luminosidad del color.
• colorSaturation: la saturación del color.
• colorHue: el tono del color.

Se pueden definir varios componentes visualMap, lo que permite realizar un mapeo visual de múltiples dimensiones de los datos al mismo tiempo.

Vinculación interactiva

En el siguiente ejemplo, varios gráficos comparten un mismo dataset y tienen interacción vinculada: