Jeu de données ECharts (dataset)

ECharts utilise dataset pour gérer les données.

Le composant dataset est utilisé pour une déclaration séparée des données, permettant de gérer les données indépendamment, de les réutiliser par plusieurs composants, et permettant un mappage données-visuel basé sur les données.

Voici l'exemple le plus simple de dataset :

Alternativement, le format courant de tableau d'objets peut également être utilisé :

Mise en correspondance des données avec les graphiques

Nous pouvons mettre en correspondance les données avec des graphiques dans l'élément de configuration.

Nous pouvons utiliser l'attribut series.seriesLayoutBy pour configurer si le jeu de données associe les colonnes ou les lignes aux séries graphiques. Par défaut, il associe par colonnes.

Dans l'exemple suivant, nous utiliserons la propriété seriesLayoutBy pour configurer si les données sont affichées par colonnes ou par lignes.

Les données décrites par les graphiques courants se présentent principalement sous la forme d'une "table à deux dimensions". Nous pouvons utiliser la propriété series.encode pour mapper les données correspondantes sur les axes (tels que les axes X et Y) :

La structure de base de la déclaration encode est la suivante : le côté gauche des deux-points est le nom spécifique du système de coordonnées, du label, etc., comme 'x', 'y', 'tooltip', etc., et le côté droit des deux-points est le nom de la dimension dans les données (format chaîne) ou l'indice de dimension (format numérique, en comptant à partir de 0). Une ou plusieurs dimensions peuvent être spécifiées (à l'aide d'un tableau). En général, il n'est pas nécessaire d'écrire toutes les informations ci-dessous ; écrivez-les selon vos besoins.

Les propriétés prises en charge par encode sont les suivantes :

// 在任何坐标系和系列中，都支持：
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
}

Plus d'exemples pour encode :

Mappage des canaux visuels (couleur, taille, etc.)

Nous pouvons utiliser le composant visualMap pour mapper les canaux visuels.

Les éléments visuels peuvent être :

• symbol : La forme graphique de l'élément graphique.
• symbolSize : la taille de l'élément graphique.
• color : la couleur de l'élément graphique.
• colorAlpha : La transparence de la couleur de l'élément graphique.
• opacity : La transparence de l'élément graphique et de ses accessoires (tels que les étiquettes de texte).
• colorLightness : la luminosité de la couleur.
• colorSaturation : la saturation de la couleur.
• colorHue : la teinte de la couleur.

Plusieurs composants visualMap peuvent être définis, ce qui permet une mise en correspondance visuelle de plusieurs dimensions des données simultanément.

Liaison interactive

Dans l'exemple suivant, plusieurs graphiques partagent un même jeu de données, avec des interactions liées :