Przy śledzeniu rynków finansowych i zmian cen aktywów w czasie, Wykres świecowy jest standardowym narzędziem wizualizacji w branży. Łącząc cztery kluczowe punkty cenowe — Otwarcie, Maksimum, Minimum i Zamknięcie (OHLC) — w pojedynczą wizualną kolumnę, wykresy świecowe pokazują wahania cenowe, zakres handlowy oraz nastawienie rynku na pierwszy rzut oka, co czyni je niezbędnymi dla paneli wydajności akcji, monitorów kryptowalut oraz widoków handlu towarami trwałymi.
Zasady działania wykresów świecowych
W Apache ECharts serie świecowe są renderowane przy użyciu type: 'candlestick' (lub synonim 'k'). Każdy punkt danych wymaga tablicy czterech wartości ułożonych jawnie jako [Otwarcie, Zamknięcie, Najniższa, Najwyższa]. Silnik wykresów rysuje pełny lub pusty kształt pomiędzy Otwarcie a Zamknięcie, z cienkimi „łodygami” rozciągającymi się do najniższych i najwyższych cen.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres świecowy, przypisz wartości czasu wzdłuż ciągłej osi X i przekaż [Otwarcie, Zamknięcie, Najniższa, Najwyższa] tablice do danych serii:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
xAxis: {
type: 'category',
data: ['2026-05-01', '2026-05-02', '2026-05-03', '2026-05-04', '2026-05-05']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38], // [Otwarcie, Zamknięcie, Najniższa, Najwyższa] -> Wzrostowy (Zamknięcie > Otwarcie)
[40, 35, 30, 50], // Spadkowy (Zamknięcie < Otwarcie)
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
Zaawansowane techniki strukturalne
Wykresy świecowe można dostosować do międzynarodowych konwencji kolorystycznych, zakresów czasowych z powiększeniem lub łączyć z średnimi kroczącymi.
1. Dostosowane kolory i średnie kroczące
Dostosuj kolory świec wzrostowych (do góry) i spadkowych (w dół) przy użyciu itemStyle, a nałożenie linii średniej kroczącej poprzez połączenie serii linii z serią świecową:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['Dzienny K', 'MA5']
},
xAxis: {
type: 'category',
data: ['Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob', 'Niedz']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: 'Dzienny K',
type: 'candlestick',
data: [
[2320, 2320, 2287, 2362],
[2300, 2291, 2288, 2341],
[2295, 2312, 2290, 2380],
[2315, 2330, 2310, 2360],
[2330, 2325, 2312, 2355],
[2325, 2350, 2320, 2370],
[2350, 2340, 2330, 2385]
],
itemStyle: {
color: '#eb4d4b', // Kolor dla wzrostu (Zamknięcie > Otwarcie)
color0: '#6ab04c', // Kolor dla spadku (Zamknięcie < Otwarcie)
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'line',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
Dokładna dostosowanie układu i interaktywne przybliżanie
Dodanie kontrolek przybliżania szeregów czasowych daje użytkownikom elastyczność podczas nawigacji po gęstych historycznych rekordach handlowych.
1. Kontrolki przybliżania danych i wskaźników osi
Zaimplementuj poziome suwaki i przybliżanie kolkiem myszy za pomocą bloku konfiguracjidataZoom blok konfiguracji:
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['Dzień 1', 'Dzień 2', 'Dzień 3', 'Dzień 4', 'Dzień 5', 'Dzień 6', 'Dzień 7', 'Dzień 8']
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: [
{
type: 'inside', // Włącza przybliżanie kolkiem myszy
start: 20,
end: 100
},
{
type: 'slider', // Wizualny suwak przybliżania na dole
show: true,
top: '90%'
}
],
series: [
{
type: 'candlestick',
data: [
[100, 110, 95, 115],
[110, 105, 100, 112],
[105, 120, 104, 125],
[120, 118, 112, 122],
[118, 125, 115, 128],
[125, 122, 120, 130],
[122, 135, 121, 138],
[135, 130, 128, 140]
]
}
]
};
Strategiczne najlepsze praktyki
- Poprawnie ułóż dane:Sprawdź strukturę tablicy! ECharts oczekuje
[Otwarcie, Zamknięcie, Najniższa, Najwyższa]—zamiana Zamknięcia i Najniższej wartości to częsty powód błędów renderowania. - Włącz
scale: truena osi Y: Zawsze dodajscale: truena osiach cen numerycznych, aby wykres automatycznie dopasowywał się do bieżącego zakresu cen, zamiast wymuszać początek w zerze. - Użyj wskaźników osi typu krzyżyk: Ustaw
tooltip.axisPointer.type = 'cross'aby pokazywać ciągłe linie odniesienia pionowe i poziome ułatwiające dopasowanie cen i znaczników czasu.