При отслеживании финансовых рынков и колебаний цен на активы во времени, График свечей является стандартным инструментом визуализации. Объединяя четыре ключевых ценовых показателя — Открытие, Максимум, Минимум и Закрытие (OHLC) — в одну визуальную полосу, графики свечей показывают колеблемость цен, торговый диапазон и рыночную настроенность за один взгляд, что делает их необходимыми для панелей отчетов по акциям, трекеров криптовалют и просмотров торговли товарами.
Механика свечей
В Apache ECharts серии свечей отображаются с использованием type: 'candlestick' (или алиас 'k'). Каждая точка данных требует массив из 4 значений, явно упорядоченных как [Открытие, Закрытие, Минимум, Максимум]. Двигатель графика рисует сплошное или пустое тело между Открытием и Закрытием, с тонкими «ножками» линий, простирающимися до минимальных и максимальных цен.
1. Основная настройка
Чтобы создать базовый график свечей, отобразите временные значения по непрерывной оси X и передайте [Открытие, Закрытие, Минимум, Максимум] массивы в данные серии:
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], // [Открытие, Закрытие, Минимум, Максимум] -> Бычий (Закрытие > Открытие)
[40, 35, 30, 50], // Медвежий (Закрытие < Открытие)
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
Расширенные структурные техники
Графики свечей можно настраивать с использованием международных цветовых традиций, увеличенных временных диапазонов или комбинировать с скользящими средними.
1. Настройка цветов и скользящих средних
Настройте цвета бычьих (вверх) и медвежьих (вниз) полос с помощью itemStyle, и наложите линии скользящей средней, комбинируя линейные серии с серией свечей:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['Ежедневный K', 'MA5']
},
xAxis: {
type: 'category',
data: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: 'Ежедневный 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', // Цвет для бычьего тренда (Закрытие > Открытие)
color0: '#6ab04c', // Цвет для медвежьего тренда (Закрытие < Открытие)
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'MA5',
type: 'line',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
Тонкая настройка макета и интерактивного масштабирования
Добавление элементов управления масштабированием временных рядов предоставляет пользователям гибкость при навигации по плотным историческим записям торговли.
1. Управление масштабированием данных и указателями осей
Используйте горизонтальные ползунки и масштабирование колесиком мыши с помощью блока конфигурацииdataZoom блока конфигурации:
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['День 1', 'День 2', 'День 3', 'День 4', 'День 5', 'День 6', 'День 7', 'День 8']
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: [
{
type: 'inside', // Включает масштабирование колесиком мыши
start: 20,
end: 100
},
{
type: 'slider', // Визуальный ползунок масштабирования внизу
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]
]
}
]
};
Стратегические лучшие практики
- Правильно упорядочьте данные: Проверьте структуру массива! ECharts ожидает
[Открытие, Закрытие, Минимум, Максимум]—перестановка Закрытия и Минимума — распространённая причина ошибок отображения. - Включите
scale: trueна оси Y: Всегда включайтеscale: trueна числовых осях цен, чтобы график автоматически масштабировался в соответствии с текущим диапазоном цен, а не вынуждал начало отсчёта быть нулевым. - Используйте указатели осей в виде креста: Установите
tooltip.axisPointer.type = 'cross'чтобы отображать непрерывные вертикальные и горизонтальные линии-ориентиры для простой привязки цены и временной метки.