Liniendiagramm: Trendverfolgung und kontinuierliche Daten

Beim Verfolgen kontinuierlicher Fortschritte oder zeitserieller Veränderungen dient die Liniendiagrammals das primäre visuelle Werkzeug. Im Gegensatz zu diskreten Säulen- oder Balkendiagrammen, die sich auf den Vergleich einzelner Kategorien konzentrieren, betonen Liniendiagramme Verbindung und Steigung, um Impuls, Saisonalität und plötzliche Änderungen von Kennzahlen über kontinuierliche Sequenzen hervorzuheben, wie zum Beispiel das tägliche Wachstum aktiver Nutzer, monatliches wiederkehrendes Einkommen oder Sensortelemetriedatenströme.

Die Funktionsweise von Liniendiagrammen

In Apache ECharts werden Liniendarstellungen konfiguriert, indem die Eigenschaft type auf 'line'. Liniendiagramme verbinden sequenziell geordnete Datenpunkte entlang einer kontinuierlichen kategorischen oder Zeitachse auf der horizontalen Achse (xAxis) und ordnen kontinuierliche numerische Werte der vertikalen Achse (yAxis).

1. Grundlegende Einrichtung

Um ein einfaches Liniendiagramm zu erstellen, definieren Sie Ihre kontinuierlichen Kategorien entlang der X-Achse und ordnen Sie Ihre Datensätze einem Series-Objekt mit type: 'line':

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260]
        }
    ]
};

Erweiterte strukturelle Techniken

Liniendiagramme bieten Flexibilität für mehrere metrische Überlagerungen, glatte Interpolationskurven und maßgeschneiderte Indikatoren für Datenpunkte.

1. Glatte Interpolationskurven

Standardmäßig verbinden Linienserien Datenpunkte mit geraden Linienstücken. Durch Aktivieren von smooth: truewird kubische Spline-Interpolation angewendet, um gekrümmte, organische Linienpfade über Ihr Datenset zu erstellen:

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

2. Vergleich der Leistung bei mehreren Linien

Vergleichen Sie sekundäre Metriken über identische Zeitintervalle, indem Sie mehrere Linienobjekte innerhalb des series Array bereitstellen:

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Aktueller Zeitraum', 'Vorheriger Zeitraum']
    },
    xAxis: {
        type: 'category',
        data: ['Woche 1', 'Woche 2', 'Woche 3', 'Woche 4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Aktueller Zeitraum',
            type: 'line',
            smooth: true,
            data: [320, 332, 301, 334],
            itemStyle: { color: '#5470c6' }
        },
        {
            name: 'Vorheriger Zeitraum',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234],
            itemStyle: { color: '#91cc75' }
        }
    ]
};

Feinabstimmung von Bereichsfüllungen und Datenpunkten

Linienreihen können visuell verbessert werden, indem subtile Hintergrundverläufe und gezielte Datenmarken verwendet werden, um auf wichtige Meilensteine hinzuweisen.

1. Linienbereichs-Stil

Hinzufügen eines areaStyleEigenschaft verwandelt ein Standard-Linien-Diagramm in eine Bereichsansicht, wobei der Bereich zwischen der Linienbahn und der horizontalen Achse gefüllt wird:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false, // Linie direkt an Achsenrändern ausrichten
        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)' // Weiche Füllung unter der Linie
            },
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            symbolSize: 8
        }
    ]
};

Strategische Best Practices

• Verwenden Sie boundaryGap: falsefür Zeitreihen:Das Entfernen der Standardrandabstände auf kontinuierlichen Zeitachsen ermöglicht es der Linie, direkt am Nullrand zu beginnen, um eine saubere Kanten-zu-Kanten-Darstellung zu erzielen.
• Halten Sie die Anzahl der Linien niedrig:Vermeiden Sie die Darstellung von mehr als 4 bis 5 Linien auf einer einzigen Leinwand. Überfüllte Linien-Diagramme („Spaghetti-Diagramme“) werden schnell unleserlich.
• Achsen-Tooltip-Auslöser Immer konfigurieren Tooltip: { Auslöser: 'Achse' } damit Benutzer entlang eines beliebigen horizontalen Punkts hovern können, um präzise Werte aller aktiven Linienreihen gleichzeitig anzuzeigen.