Lors de la création de graphiques ECharts complexes avec de nombreuses séries de données, trois défis courants se présentent : la gestion de l'affichage des légendes lorsqu'elles sont trop nombreuses, la génération d'une palette de couleurs distinctes et pertinentes, et la mise en forme des infobulles (tooltips) pour une lisibilité optimale. Cet article propose des solutions pratiques et du code réorganisé pour adresser ces points.

Configuration de base et définition des séries

La première étape consiste à initialiser le graphique et à préparer les données. Au lieu de définir menuellement chaque série, il est plus efficace de générer dynamiquement le tableau des séries à partir d'une liste de libellés. Cela réduit la verbosité du code et facilite la maintenance.

const chartContainer = document.getElementById('chartArea');
const myChart = echarts.init(chartContainer);

// Liste des noms de séries (légendes)
const seriesLabels = [
    'Vitesse Vent 1', 'Vitesse Vent 2', 'Vitesse Vent 3', 'Vitesse Vent 4',
    'Vitesse Vent 5', 'Vitesse Vent 6', 'Vitesse Vent 7', 'Vitesse Vent 8',
    'Vitesse Vent 9', 'Vitesse Vent 10', 'Vitesse Vent 11', 'Vitesse Vent 12'
];

// Génération dynamique des séries
const seriesData = seriesLabels.map(label => ({
    name: label,
    type: 'line',
    data: Array.from({length: 8}, () => Math.floor(Math.random() * 20) + 1),
    smooth: true,
    symbol: 'circle',
    symbolSize: 6,
}));

Génération d'une palette de couleurs distinctes

Pour garantir que chaque série ait une couleur unique et facilement identifiable, une fonction de génération aléatoire avec contrôle de doublons est nécessaire. La logique suivante utilise une structure de données Set pour garantir l'unicité de manière plus performante.

function generateDistinctColors(count) {
    const colorPalette = [];
    const usedColors = new Set();

    while (colorPalette.length < count) {
        // Génère une composante RGB aléatoire
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        const color = `rgb(${r}, ${g}, ${b})`;

        // Ajoute seulement si la couleur n'existe pas déjà
        if (!usedColors.has(color)) {
            usedColors.add(color);
            colorPalette.push(color);
        }
    }
    return colorPalette;
}

Configuration complète de l'option ECharts

La configuration finale intègre les couleurs générées, une légende avec défilement, un tooltip formaté pour afficehr les données sur plusieurs lignes, et une barre de zoom sur l'axe des X pour naviguer dans les grandes séries de données.

const chartOptions = {
    color: generateDistinctColors(seriesLabels.length),
    tooltip: {
        trigger: 'axis',
        confine: true, // Empêche l'infobulle de sortir du conteneur du graphique
        formatter: function(params) {
            let tooltipContent = `<strong>${params[0].axisValueLabel}</strong><br></br>`;
            // Affiche 3 éléments par ligne pour un meilleur rendu
            params.forEach((item, index) => {
                tooltipContent += `${item.marker} ${item.seriesName}: ${item.value}`;
                if ((index + 1) % 3 === 0) {
                    tooltipContent += '<br></br>';
                } else {
                    tooltipContent += '   ';
                }
            });
            return tooltipContent;
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '15%', // Espace pour la barre de zoom
        top: '8%',
        containLabel: true
    },
    legend: {
        type: 'scroll', // Légende scrollable pour un grand nombre d'entrées
        orient: 'horizontal',
        bottom: 0,
        width: '90%',
        pageIconColor: '#2f4554',
        pageTextStyle: { color: '#333' }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
        axisLabel: { color: '#666' }
    },
    yAxis: {
        type: 'value',
        axisLabel: { color: '#666' }
    },
    dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        start: 0,
        end: 100,
        bottom: 25
    }, {
        type: 'inside',
        xAxisIndex: [0],
        start: 0,
        end: 100
    }],
    series: seriesData
};

myChart.setOption(chartOptions);

Les points clés de cette implémentation sont :

• Légende dynamique : Utilisation de type: 'scroll' et d'un positionnement en bas pour accommoder un grand nombre de séries.
• Couleurs uniques : La fonction generateDistinctColors garantit la visibilité et la distinction de chaque courbe.
• Infobulle structurée : Le formatter organise les données en groupes de trois sur chaque ligne, améliorant la lecture.
• Navigation : L'ajout d'un dataZoom de type slider permet de se concentrer sur des intervalles de données spécifiques.