Graphique en ligne : Suivi des tendances et données continues

Lors du suivi d’une progression continue ou de changements sériels temporels, le Graphique en lignesert d’outil visuel principal. Contrairement aux diagrammes en colonnes ou en barres discrets qui se concentrent sur les comparaisons entre catégories individuelles, les graphiques en ligne mettent l’accent sur les connexions et la pente pour mettre en évidence l’impulsion, la saisonnalité et les changements soudains des métriques sur des séquences continues, telles que la croissance quotidienne des utilisateurs actifs, les revenus mensuels récurrents ou les flux de télémétrie des capteurs.

Le fonctionnement des graphiques en ligne

Dans Apache ECharts, les visualisations en ligne sont configurées en définissant la propriété series type à 'line'. Les graphiques en ligne relient des points de données ordonnés séquentiellement le long d’un axe horizontal continu catégoriel ou temporel (xAxis) et associent des valeurs numériques continues à l’axe vertical (yAxis).

1. Configuration de base

Pour créer un graphique en ligne basique, définissez vos catégories continues le long de l’axe X et associez votre jeu de données à un objet série avec type: 'line':

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260]
        }
    ]
};

Techniques structurelles avancées

Les graphiques en ligne offrent une flexibilité pour les superpositions de plusieurs métriques, les courbes d’interpolation lisse et les indicateurs personnalisés de points de données.

1. Courbes d’interpolation lisse

Par défaut, les séries en ligne relient les points de données par des segments de droite. En activant smooth: trueapplique une interpolation par spline cubique pour créer des trajectoires de ligne courbées et organiques à travers votre jeu de données :

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330],
            lineStyle: {
                width: 3,
                color: '#5470c6'
            }
        }
    ]
};

2. Comparaison des performances en plusieurs lignes

Comparez les métriques secondaires sur des intervalles de temps identiques en fournissant plusieurs objets de ligne à l’intérieur du série tableau :

option = {
    tooltip: {
        trigger: 'axis'
    },
    légende: {
        data: ['Période actuelle', 'Période précédente']
    },
    xAxis: {
        type: 'category',
        data: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Période actuelle',
            type: 'line',
            smooth: true,
            data: [320, 332, 301, 334],
            itemStyle: { color: '#5470c6' }
        },
        {
            name: 'Période précédente',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234],
            itemStyle: { color: '#91cc75' }
        }
    ]
};

Affinage des remplissages de zone et des points de données

Les séries de lignes peuvent être améliorées visuellement à l’aide de dégradés de fond subtils et de marqueurs de données ciblés pour attirer l’attention sur des jalons clés.

1. Style des zones de ligne

Ajouter une zoneStylepropriété transforme un graphique en ligne standard en vue de zone, en remplissant la région entre le tracé de la ligne et l’axe horizontal :

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false, // Aligner la ligne directement aux bords de l'axe
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 590, 820, 710, 430],
            areaStyle: {
                color: 'rgba(84, 112, 198, 0.25)' // Remplissage doux sous la ligne
            },
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            symbolSize: 8
        }
    ]
};

Meilleures pratiques stratégiques

• Utilisez boundaryGap: false pour les séquences temporelles : Supprimer les espaces par défaut aux bords sur les axes temporels continus permet à la ligne de commencer directement au margin zéro pour une présentation nette de bord à bord.
• Maintenez un faible nombre de lignes : Évitez de dessiner plus de 4 à 5 lignes sur une même toile. Les graphiques à lignes surchargés (« graphiques spaghetti ») deviennent rapidement illisibles.
• Déclencheurs de tooltip d’axe Toujours configurer infobulle: { déclencheur: 'axe' }afin que les utilisateurs puissent passer leur curseur sur n’importe quel point horizontal pour visualiser simultanément des valeurs précises pour toutes les séries de lignes actives.