Wykres liniowy: śledzenie trendów i danych ciągłych

Gdy śledzisz ciągły postęp lub zmiany w serii czasowej, Wykres liniowysłuży jako podstawowe narzędzie wizualne. W przeciwieństwie do wykresów słupkowych lub kolumnowych, które skupiają się na porównaniach pojedynczych kategorii, wykresy liniowe podkreślają połączenia i nachylenie, aby wyróżnić momentum, sezonowość i nagłe zmiany metrykna ciągłych sekwencjach, takich jak wzrost liczby aktywnych użytkowników dziennie, miesięczne przychody powtarzające się lub strumienie danych z czujników.

Zasady działania wykresów liniowych

W Apache ECharts wizualizacje liniowe są konfigurowane przez ustawienie właściwości serii type na 'line'. Wykresy liniowe łączą kolejno uporządkowane punkty danych wzdłuż poziomej osi kategorii ciągłych lub czasowych (xAxis) i mapują ciągłe wartości liczbowe na oś pionową (yAxis).

1. Podstawowa konfiguracja

Aby stworzyć podstawowy wykres liniowy, zdefiniuj ciągłe kategorie wzdłuż osi X i przypisz dane do obiektu serii z type: 'line':

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob', 'Nied']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260]
        }
    ]
};

Zaawansowane techniki strukturalne

Wykresy liniowe oferują elastyczność w przypadku nakładania wielu metryk, gładkich krzywych interpolacji oraz niestandardowych wskaźników punktów danych.

1. Gładkie krzywe interpolacji

Domyślnie serie liniowe łączą punkty danych odcinkami prostymi. Włączając smooth: truezastosowana jest interpolacja krzywą splajnową trzeciego stopnia, aby stworzyć zgięte, organiczne ścieżki linii w całym zbiorze danych:

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330],
            lineStyle: {
                width: 3,
                color: '#5470c6'
            }
        }
    ]
};

2. Porównanie wydajności wieloliniowe

Porównaj metryki pomocnicze w identycznych przedziałach czasu, podając wiele obiektów linii wewnątrzseries tablicy:

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Bieżący okres', 'Poprzedni okres']
    },
    xAxis: {
        type: 'category',
        data: ['Tydzień 1', 'Tydzień 2', 'Tydzień 3', 'Tydzień 4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Bieżący okres',
            type: 'line',
            smooth: true,
            data: [320, 332, 301, 334],
            itemStyle: { color: '#5470c6' }
        },
        {
            name: 'Poprzedni okres',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234],
            itemStyle: { color: '#91cc75' }
        }
    ]
};

Dokładna dostosowanie wypełnień obszarów i punktów danych

Serie linii mogą być wizualnie ulepszone za pomocą subtelnych wypełnień gradientowych tła i skierowanych znaczników danych, które zwracają uwagę na kluczowe punkty zwrotne.

1. Stylizacja obszaru linii

DodanieareaStylewłaściwość przekształca standardowy wykres liniowy w widok obszarowy, wypełniając obszar między ścieżką linii a osią poziomą:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false, // Wyrównaj linię bezpośrednio do krawędzi osi
        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)' // Delikatne wypełnienie pod linią
            },
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            symbolSize: 8
        }
    ]
};

Strategiczne najlepsze praktyki

• UżyjboundaryGap: falsedla sekwencji czasowych:Usunięcie domyślnych odstępów na krawędziach na ciągłych osiach czasu pozwala linii zaczynać bezpośrednio od marginesu zerowego, zapewniając czyste przedstawienie od krawędzi do krawędzi.
• Zachowaj niską liczbę linii:Unikaj wyświetlania więcej niż 4 do 5 linii na jednym płótnie. Przeciążone wykresy linii („wykresy makaronowe”) szybko stają się nieczytelne.
• Wyzwalacze podpowiedzi osiZawsze konfigurujpodpowiedź: { trigger: 'axis' }aby użytkownicy mogli przesuwać wskaźnik wzdłuż dowolnego punktu poziomego, aby wyświetlić dokładne wartości we wszystkich aktywnych serii linii jednocześnie.