Gdy śledzisz codzienne nawyki, ruch na stronie internetowej, dzienniki aktywności serwera lub intensywność sprzedaży w ciągu pełnych lat kalendarzowych, Wykres kalendarzowy zapewnia skuteczny układ wizualny oparty na siatce. Modele pochodzą z wykresów wkładów i map ciepła sezonowych, wykresy kalendarzowe przyporządkowują ciągłe metryki ilościowe do konkretnych dni kalendarzowych, pomagając użytkownikom w szybkim wykrywaniu szczytów aktywności, zmian w weekendy oraz wielomiesięcznych wzorców sezonowych.
Zasada działania wykresów kalendarzowych
W Apache ECharts wykresy kalendarzowe wykorzystują dedykowany kalendarz układ współrzędnych połączony z mapą ciepła lub rozrzutem typ serii. Zamiast standardowych osi kartezjańskich X i Y, ECharts automatycznie oblicza położenia siatki dla dni i miesięcy przy użyciu ciągów dat.
1. Podstawowa konfiguracja
Aby stworzyć podstawową mapę ciepła kalendarzową na rok, zdefiniuj komponent kalendarz określając zakres (np. '2026'), dołącz mapę wizualną aby kontrolować gradienty kolorów metryk, oraz przekaż pary daty-wartości w formacie ['RRRR-MM-DD', wartość]:
option = {
tytuł: {
góry: 10,
lewo: 'środek',
tekst: 'Codzienne przesyłki (2026)'
},
podpowiedź: {
format: function (parametry) {
return parametry.wartość[0] + ': ' + parametry.wartość[1] + ' przesyłek';
}
},
mapaWizualna: {
min: 0,
max: 100,
typ: 'kawałkowa',
orientacja: 'pozioma',
lewo: 'środek',
góry: 65,
wZakresie: {
kolor: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
}
},
kalendarz: {
góry: 120,
lewo: 30,
prawo: 30,
rozmiarKomórki: ['auto', 13],
zakres: '2026',
stylElementu: {
grubośćKrawędzi: 0.5,
kolorKrawędzi: '#ccc'
},
etykietaRoku: { pokazuj: false }
},
seria: {
typ: 'mapaCiepła',
systemWspółrzędnych: 'kalendarz',
dane: [
['2026-01-01', 12], ['2026-01-02', 45], ['2026-01-03', 88],
['2026-02-14', 95], ['2026-03-20', 30], ['2026-05-10', 65],
['2026-07-27', 82], ['2026-10-31', 99], ['2026-12-25', 10]
]
}
};
Zaawansowane techniki strukturalne
Wykresy kalendarzowe mogą być dostosowywane do układów przewijanych pionowo lub dostosowywane za pomocą przedstawień rozrzutu w celu wizualizacji dyskretnych metryk dziennych.
1. Pionowy widok kalendarzowy wielomiesięczny
Zmień orientacja: 'pionowa' w komponencie kalendarza, aby ułożyć miesiące pionowo – idealne dla wysokich widgetów pulpitu lub układów mobilnych:
option = {
tytuł: {
tekst: 'Dziennik aktywności Q1',
lewy: 'środek'
},
podpowiedź: {},
mapaWizualna: {
min: 0,
max: 500,
typ: 'ciągły',
orientacja: 'pionowa',
prawy: 10,
górny: 'środek',
wZakresie: {
kolor: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
}
},
kalendarz: {
górny: 60,
lewy: 'środek',
orientacja: 'pionowa',
zakres: ['2026-01-01', '2026-03-31'],
rozmiarKomórki: [20, 20],
etykietaRoku: { pokazuj: false },
etykietaDnia: {
pierwszyDzień: 1, // Początek tygodnia w poniedziałek
mapaNazw: 'en'
},
etykietaMiesiąca: { mapaNazw: 'en' }
},
seria: {
typ: 'ciepło',
systemWspółrzędnych: 'kalendarz',
dane: [
['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],
['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]
]
}
};
Dokładna dostosowanie układu i stylizacji
Połączenie układów współrzędnych kalendarza z seriami rozproszonymi pozwala skalować rozmiar punktów na podstawie intensywności, a nie tylko na podstawie bloków kolorystycznych.
1. Kalendarz z kropkami rozproszonymi
Używanie typ: 'rozproszone' w kalendarzu układ współrzędnych tworzy interaktywne wskaźniki dziennie w stylu bańki:
option = {
tytuł: {
tekst: 'Dzienny objętość zamówień',
lewy: 'środek'
},
podpowiedź: {
format: function (parametry) {
return parametry.value[0] + ': ' + parametry.value[1] + ' zamówień';
}
},
kalendarz: {
górny: 80,
lewy: 40,
prawy: 40,
zakres: '2026-05',
rozmiarKomórki: ['auto', 25],
stylElementu: {
kolor: '#f8fafc',
grubośćKrawędzi: 1,
kolorKrawędzi: '#e2e8f0'
}
},
seria: {
typ: 'rozproszone',
systemWspółrzędnych: 'kalendarz',
rozmiarSymbolu: function (wartość) {
return wartość[1] / 10; // Skaluje rozmiar bańki zgodnie z liczbą zamówień
},
stylElementu: {
kolor: '#3b82f6',
przezroczystość: 0.8
},
dane: [
['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],
['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]
]
}
};
Strategiczne najlepsze praktyki
- Dopasuj daty do formatu ISO: Upewnij się, że daty w tablicy danych serii są w standardowym formacie
'RRRR-MM-DD'w formacie ciągów znaków, aby siatka kalendarza poprawnie przyporządkowała zapisy. - Skonfiguruj
pierwszyDzieńdla spójności regionalnej: UżyjetykietaDnia.pierwszyDzień(ustawione na0dla niedzieli lub1dla poniedziałku) w celu dopasowania do lokalnych zasad kalendarza Twojej publiczności. - Skonfiguruj przyporządkowanie kategorii do wizualizacji dla wkładów: Podczas renderowania wykresów commitów w stylu GitHub, użyj
kawałkowegotyp mapy wizualnej z dyskretnymi punktami kolorów zamiast ciągłych gradientów, aby uzyskać bardziej przejrzyste kroki wizualne kategorii.