Gestion centralisée des données avec le composant dataset d'ECharts

Depuis la version 4, ECharts offre la possibilité de définir un jeu de données indépendant via le composant dataset. Cette approche sépare la configuration des données de la représentation graphique, facilitant ainsi leur réutilisation entre différents éléments du graphique.

Ancienne méthode : données intégrées aux séries

Auparavant, les données devaient être incluses directement dans chaque série :


const configGraphique = {
    axeX: {
        type: 'category',
        data: ['Latte Matcha', 'Thé au lait', 'Cacao Fromage', 'Brownie Noix']
    },
    axeY: {},
    series: [
        {
            type: 'bar',
            name: '2018',
            data: [72.5, 88.3, 91.6, 67.2]
        },
        {
            type: 'bar',
            name: '2019',
            data: [84.1, 76.9, 83.7, 59.4]
        },
        {
            type: 'bar',
            name: '2020',
            data: [91.2, 70.5, 88.3, 72.8]
        }
    ]
};

Ce modèle, bien qu'intuitif, présente des contraintes : nécessité de pré-traitement des données, difficulté de partage entre séries, et complexité lors de modifications de la représentation visuelle.

Utilisation du composant dataset

Le composant dataset résout ces problématiques en offrant :

  • Une séparation claire entre données et configuration visuelle
  • La possibilité de réutiliser les mêmes données dans plusieurs composants
  • Une gestion optimisée pour les jeux de données volumineux
  • Support de multiples formats (tableaux 2D, tableaux d'objets)

Exemple fondamental avec un tableau à deux dimensions :


const config = {
    legende: {},
    infoBulle: {},
    dataset: {
        source: [
            ['produit', '2018', '2019', '2020'],
            ['Latte Matcha', 45.8, 72.3, 89.5],
            ['Thé au lait', 67.2, 58.9, 42.1],
            ['Cacao Fromage', 78.4, 63.7, 75.3],
            ['Brownie Noix', 52.6, 41.2, 35.8]
        ]
    },
    axeX: {type: 'category'},
    axeY: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

Alternative avec un tableau d'objets :


const configAlternative = {
    legende: {},
    infoBulle: {},
    dataset: {
        dimensions: ['produit', '2018', '2019', '2020'],
        source: [
            {produit: 'Latte Matcha', '2018': 45.8, '2019': 72.3, '2020': 89.5},
            {produit: 'Thé au lait', '2018': 67.2, '2019': 58.9, '2020': 42.1},
            {produit: 'Cacao Fromage', '2018': 78.4, '2019': 63.7, '2020': 75.3},
            {produit: 'Brownie Noix', '2018': 52.6, '2019': 41.2, '2020': 35.8}
        ]
    },
    axeX: {type: 'category'},
    axeY: {},
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

Configuration du mapping données-graphique

La construction d'une visualisation repose sur deux principes fondamentaux :

  1. Déterminer si les séries correspondent aux colonnes ou aux lignes du dataset
  2. Spécifier les règles de correspondance entre dimensions et éléments visuels

Mapping par lignes ou colonnes

La propriété seriesLayoutBy contrôle cette organisasion :

  • 'column' : chaque colonne représente une série (comportement par défaut)
  • 'row' : chaque ligne représente une série

const configDouble = {
    legende: {},
    infoBulle: {},
    dataset: {
        source: [
            ['produit', '2020', '2021', '2022', '2023'],
            ['Latte Matcha', 38.5, 52.7, 68.9, 75.2],
            ['Thé au lait', 72.3, 84.6, 79.1, 81.5],
            ['Cacao Fromage', 45.8, 56.3, 72.4, 68.9]
        ]
    },
    axeX: [
        {type: 'category', indexGrille: 0},
        {type: 'category', indexGrille: 1}
    ],
    axeY: [
        {indexGrille: 0},
        {indexGrille: 1}
    ],
    grille: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        // Séries mappées par lignes
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // Séries mappées par colonnes
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
};

Comprendre les dimensions

Une dimension désigne un axe d'information dans le jeu de données. Lorsque les séries sont associées aux colonnes, chaque colonne constitue une dimension. Dans le cas contraire, chaque ligne remplit ce rôle.

Les noms de dimensions peuvent être définis de plusieurs manières :


// Définition dans dataset
const optionAvecDimensions = {
    dataset: {
        dimensions: [
            {name: 'note'},
            'quantite',
            {name: 'produit', type: 'ordinal'}
        ],
        source: [/* données */]
    },
    // ... reste de la configuration
};

// Définition au niveau de la série
const optionAvecSerie = {
    dataset: {
        source: [/* données */]
    },
    series: {
        type: 'line',
        dimensions: [
            null,
            'quantite',
            {name: 'produit', type: 'ordinal'}
        ]
    },
    // ... reste de la configuration
};

Les types de dimensions disponibles :

  • 'number' : données numériques standard
  • 'ordinal' : données catégorielles ou textuelles
  • 'time' : données temporelles avec conversion automatique
  • 'float' : nombres flottants optimisés (TypedArray)
  • 'int' : nombres entiers optimisés (TypedArray)

Configuration du mapping avec encode

La propriété encode permet de définir précisément les correspondances :


const configMapping = {
    dataset: {
        source: [
            ['note', 'volume', 'produit'],
            [82.5, 45230, 'Latte Matcha'],
            [64.8, 62180, 'Thé au lait'],
            [71.2, 38450, 'Cacao Fromage'],
            [45.9, 15820, 'Brownie Noix'],
            [88.3, 22340, 'Cacao Matcha'],
            [55.7, 68920, 'Thé vert'],
            [32.1, 84560, 'Jus d\'orange'],
            [28.4, 92340, 'Jus de citron']
        ]
    },
    axeX: {},
    axeY: {type: 'category'},
    series: [{
        type: 'bar',
        encode: {
            x: 'volume',
            y: 'produit'
        }
    }]
};

Structrue détaillée de encode :


// Propriétés générales
encode: {
    tooltip: ['produit', 'note'],
    seriesName: [1, 3],
    itemId: 2,
    itemName: 3
}

// Pour les coordonnées cartésiennes
encode: {
    x: [1, 5, 'note'],
    y: 0
}

// Pour les coordonnées polaires
encode: {
    radius: 3,
    angle: 2
}

// Pour les graphiques sans système de coordonnées
encode: {
    value: 3
}

Mapping des canaux visuels

Le composant visualMap permet de contrôler les propriétés visuelles :


const configVisual = {
    dataset: {
        source: [
            ['note', 'volume', 'produit'],
            [82.5, 45230, 'Latte Matcha'],
            [64.8, 62180, 'Thé au lait'],
            [71.2, 38450, 'Cacao Fromage'],
            [45.9, 15820, 'Brownie Noix'],
            [88.3, 22340, 'Cacao Matcha'],
            [55.7, 68920, 'Thé vert'],
            [32.1, 84560, 'Jus d\'orange'],
            [28.4, 92340, 'Jus de citron']
        ]
    },
    grille: {containLabel: true},
    axeX: {name: 'volume'},
    axeY: {type: 'category'},
    visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 20,
        max: 90,
        text: ['Note élevée', 'Note faible'],
        dimension: 0,
        inRange: {
            color: ['#A8D8EA', '#FF6B6B']
        }
    },
    series: [{
        type: 'bar',
        encode: {
            x: 'volume',
            y: 'produit'
        }
    }]
};

Règles de mapping par défaut

ECharts applique automatiquement des règles de correspondance pour simplifier l'utiilsation :

  • Avec un axe catégoriel : la première colonne/ligne sert de catégories, les suivantes représentent les séries
  • Sans axe catégoriel : les paires de colonnes/lignes correspondent aux séries
  • Pour les graphiques sans coordonnées (ex: camembert) : première colonne/ligne pour les noms, seconde pour les valeurs

const configCamembert = {
    legende: {},
    infoBulle: {},
    dataset: {
        source: [
            ['produit', '2020', '2021', '2022', '2023'],
            ['Latte Matcha', 38.5, 52.7, 68.9, 75.2],
            ['Thé au lait', 72.3, 84.6, 79.1, 81.5],
            ['Cacao Fromage', 45.8, 56.3, 72.4, 68.9],
            ['Brownie Noix', 61.2, 48.5, 55.7, 42.3]
        ]
    },
    series: [{
        type: 'pie',
        radius: 55,
        center: ['25%', '30%']
    }, {
        type: 'pie',
        radius: 55,
        center: ['75%', '30%'],
        encode: {
            itemName: 'produit',
            value: '2021'
        }
    }, {
        type: 'pie',
        radius: 55,
        center: ['25%', '75%'],
        encode: {
            itemName: 'produit',
            value: '2022'
        }
    }, {
        type: 'pie',
        radius: 55,
        center: ['75%', '75%'],
        encode: {
            itemName: 'produit',
            value: '2023'
        }
    }]
};

Lorsque les règles par défaut ne répondent pas aux besoins spécifiques, il suffit de configurer explicitement la propriété encode pour obtenir le mapping désiré.

Étiquettes: ECharts dataset visualisation JavaScript mapping

Publié le 4 juillet à 07h28

Étiquettes Populaires

©2026 L'Atelier Monstre