Graphique de surface : tendances du volume et surface quantitative

Pour mettre en évidence à la fois la direction de la tendance et le volume global au fil du temps continu, le Graphique de surfaceoffre une approche visuelle expressive. En remplissant la région située entre la ligne de tendance et l’axe horizontal, les graphiques de surface mettent l’accent sur la magnitude relative et les variations totales du volume à travers des séquences, telles que la consommation de bande passante du serveur, le volume d’utilisateurs actifs ou le débit quotidien des transactions.

Le fonctionnement des graphiques de surface

Les graphiques de surface s’appuient directement sur la configuration du graphique en lignes. En définissant type: 'line' et en incluant une propriété areaStyledans un objet de série, le moteur de rendu remplit automatiquement l’espace géométrique situé sous le tracé de la ligne jusqu’à la ligne de base horizontale.

1. Configuration essentielle

Pour créer un graphique de surface basique, définissez un axe X continu, définissez la série type: 'line', et déclarez un objet areaStylevide ou personnalisé :

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            areaStyle: {}, // Active le remplissage par défaut
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

Techniques structurelles avancées

Les graphiques de surface peuvent être améliorés grâce à des dégradés de couleurs modernes et des courbes douces afin d’améliorer la lisibilité et l’esthétique visuelle.

1. Style de remplissage en dégradé

Un remplissage en couleur solide peut parfois paraître lourd. Appliquer un dégradé linéaire semi-transparent crée une apparence moderne et élégante où le remplissage s’estompe doucement vers l’axe inférieur :

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            areaStyle: {
                opacity: 0.8,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: 'rgba(84, 112, 198, 0.6)' },
                        { offset: 1, color: 'rgba(84, 112, 198, 0.05)' }
                    ]
                }
            },
            data: [320, 450, 410, 680, 890, 950]
        }
    ]
};

2. Comparaison superposée de plusieurs séries de surfaces

Lorsqu’on affiche plusieurs séries de surfaces dans un même graphique, il est crucial d’ajuster l’opacité du remplissage afin que les trajectoires de données sous-jacentes restent pleinement visibles :

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Trafic entrant', 'Trafic sortant']
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Trafic entrant',
            type: 'line',
            smooth: true,
            areaStyle: { opacity: 0.4 },
            data: [120, 200, 450, 600, 700, 380]
        },
        {
            name: 'Trafic sortant',
            type: 'line',
            smooth: true,
            areaStyle: { opacity: 0.4 },
            data: [80, 140, 310, 420, 510, 260]
        }
    ]
};

Affinage du layout et des espacements

Étant donné que les remplissages de zone s’étendent jusqu’à la ligne de base de l’axe Y, configurer des espaces continus aux bords maintient le remplissage aligné proprement avec la bordure du canevas.

1. Alignement sans couture des bords

En définissant boundaryGap: falsesur l’axe X catégoriel, le remplissage commence au bord gauche absolu de la grille du conteneur et se termine proprement au bord droit :

option = {
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['T1', 'T2', 'T3', 'T4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            areaStyle: {
                color: 'rgba(145, 204, 117, 0.3)'
            },
            lineStyle: {
                color: '#91cc75',
                width: 2
            },
            data: [150, 230, 224, 318]
        }
    ]
};

Meilleures pratiques stratégiques

• Utilisez des opacités de remplissage faibles :Les remplissages de zone solides masquent les lignes de grille sous-jacentes et les séries superposées. Maintenez toujours des niveaux de transparence compris entre 20 % et 50 % pour un contraste élevé.
• Limitez les séries à 2 ou 3 :Trop de formes de zone superposées entraînent une confusion visuelle. Pour 4 ou plus jeux de données cumulatifs continus, utilisez plutôt un graphique à aires empilées.
• Définissez boundaryGap: false:Supprimer les marges horizontales sur les axes temporels permet aux remplissages de zone de s’étendre sur toute la largeur de la grille sans laisser des espaces vides gênants sur les bords gauche et droit.