Wykres rozproszenia: rozkład dwuwymiarowy i skupianie punktów

Podczas badania relacji lub korelacji między dwiema zmiennymi ciągłymi, Wykres rozproszenia (lub wykres rozproszenia) jest głównym narzędziem analitycznym. Przy użyciu wykresu punktów na dwuwymiarowej siatce opartej na liczbowych współrzędnych X i Y, wykresy rozproszenia pomagają odkryć skupienia, wartości odstające, trendy i korelacje na złożonych zestawach danych, takich jak wydatki na marketing w porównaniu do generowania potencjalnych klientów lub doświadczenie pracowników w porównaniu do wynagrodzenia.

Zasady działania wykresów rozproszenia

W przeciwieństwie do wykresów słupkowych lub liniowych opartych na kategoriach, wykresy rozproszenia wykorzystują osie wartości liczbowych dla obu wymiarów. W Apache ECharts ustawienie type: 'scatter' oczekuje danych sformatowanych jako tablice współrzędnych liczbowych o dwóch elementach [x, y] lub obiekty danych przyporządkowane do liczbowych xAxis i yAxis konfiguracji.

1. Podstawowa konfiguracja

Aby stworzyć podstawowy wykres rozproszenia, zdefiniuj type: 'value' na obu osiach i podaj pary współrzędnych liczbowych w tablicy danych serii:

option = {
    tooltip: {
        trigger: 'item',
        formatter: 'X: {c0}rnY: {c1}'
    },
    xAxis: {
        type: 'value',
        name: 'Wydatki na reklamę ($k)'
    },
    yAxis: {
        type: 'value',
        name: 'Konwersje'
    },
    series: [
        {
            type: 'scatter',
            symbolSize: 12,
            data: [
                [10.0, 8.04],
                [8.07, 6.95],
                [13.0, 7.58],
                [9.05, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.03, 7.24],
                [12.0, 4.26],
                [7.08, 4.82],
                [5.02, 5.68]
            ]
        }
    ]
};

Zaawansowane techniki strukturalne

Wykresy rozproszenia mogą uwzględniać dynamiczne zmiany rozmiaru, aby przedstawić trzeci zmienną (wykres pęcherzykowy) lub wyświetlać nakładki klastrów dla wielu kategorii.

1. Zmienne rozmiary punktów (efekt pęcherzyka)

Przekaż funkcję niestandardową lub mapowanie wartości danych do symbolSize aby zakodować trzeci metryk ilościowy w rozmiarze punktu:

option = {
    tooltip: {
        trigger: 'item',
        formatter: function (param) {
            return 'Wydatki: $' + param.data[0] + 'krn' +
                   'Przychody: $' + param.data[1] + 'krn' +
                   'ROAS: ' + param.data[2] + 'x';
        }
    },
    xAxis: {
        type: 'value',
        name: 'Wydatki'
    },
    yAxis: {
        type: 'value',
        name: 'Przychody'
    },
    series: [
        {
            name: 'Kampanie',
            type: 'scatter',
            symbolSize: function (data) {
                return data[2] * 5; // Skaluj rozmiar kropki według trzeciej zmiennej
            },
            data: [
                [15, 120, 8.0],
                [25, 180, 7.2],
                [10, 50, 5.0],
                [40, 380, 9.5],
                [30, 210, 7.0]
            ],
            itemStyle: {
                color: '#5470c6',
                opacity: 0.7
            }
        }
    ]
};

Dostosowanie układu i stylizacji

Kontrola przezroczystości znaczników i dodawanie linii trendu celu zapobiega przekształcaniu się gęstych grup w jednolite, nieczytelne plamy wizualne.

1. Przezroczyste znaczniki i stylizacja grup

Zastosowanie obramowań i półprzezroczystych wypełnień elementów pozwala utrzymać widoczność punktów danych nałożonych na siebie w grupach o wysokiej gęstości:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        scale: true // Automatyczne skalowanie osi min/max, aby dopasować dane w sposób zwarty
    },
    yAxis: {
        type: 'value',
        scale: true
    },
    series: [
        {
            type: 'scatter',
            symbolSize: 16,
            itemStyle: {
                color: 'rgba(84, 112, 198, 0.6)',
                borderColor: '#5470c6',
                borderWidth: 2
            },
            data: [
                [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0],
                [155.8, 53.6], [170.0, 59.0], [159.1, 47.6], [166.0, 69.8],
                [176.2, 66.8], [160.2, 75.2], [172.5, 55.2], [170.9, 54.2]
            ]
        }
    ]
};

Strategiczne najlepsze praktyki

• Włącz scale: true na osiach liczbowych: Ustaw scale: true na obu osiach liczbowych, aby wykres automatycznie przybliżał odpowiedni zakres danych zamiast wymuszać początek w (0,0).
• Użyj przezroczystości wypełnienia dla nakładających się punktów: Podczas wykresowania setek punktów zmniejsz przezroczystość wypełnienia do około 0,4–0,6, aby gęste obszary nakładania się wydawały się naturalnie ciemniejsze.
• Daj etykiety osi z kontekstem: Zawsze jasno oznacz osie X i Y jednostkami pomiarowymi (np. „$ w tys.” lub „Opóźnienie w ms”), aby wartości były od razu jasne bez sprawdzania podpowiedzi.