При отслеживании повседневных привычек, трафика на веб-сайт, журналов активности сервера или интенсивности продаж в течение полных календарных лет, График календаря обеспечивает эффективное визуальное представление в виде сетки. Основанный на графиках вкладов и сезонных тепловых картах, график календаря отображает непрерывные количественные метрики по конкретным календарным дням, помогая пользователям визуально выявлять пиковые периоды высокой активности, вариации в выходные дни и многомесячные сезонные паттерны.
Механика графиков календарей
В Apache ECharts графики календарей используют специализированную календаря координатную систему, объединённую с тепловой картой или точечной типом ряда. Вместо стандартных декартовых осей X и Y ECharts автоматически вычисляет позиции сетки для дней и месяцев, используя строковые даты.
1. Основная настройка
Чтобы создать базовую тепловую карту годового календаря, определите компонент календаря с указанием диапазона (например, '2026'), присоедините visualMap для управления градиентами цветов метрик, и передайте пары дата-значение в формате ['ГГГГ-ММ-ДД', значение]:
option = {
title: {
top: 10,
left: 'center',
text: 'Ежедневные коммиты (2026)'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' коммитов';
}
},
visualMap: {
min: 0,
max: 100,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 65,
inRange: {
color: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
}
},
calendar: {
top: 120,
left: 30,
right: 30,
cellSize: ['auto', 13],
range: '2026',
itemStyle: {
borderWidth: 0.5,
borderColor: '#ccc'
},
yearLabel: { show: false }
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: [
['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]
]
}
};
Расширенные структурные техники
Графики календарей можно адаптировать для вертикальных прокручиваемых макетов или настраивать с помощью точечных представлений для визуализации дискретных ежедневных метрик.
1. Вертикальный многомесячный календарный вид
Измените ориентация: 'вертикальная' в компоненте календаря для вертикальной стекки месяцев — идеально подходит для высоких виджетов панели мониторинга или мобильных макетов:
option = {
заголовок: {
текст: 'Журнал активности Q1',
left: 'center'
},
всплывающая подсказка: {},
визуальная карта: {
мин: 0,
макс: 500,
тип: 'непрерывный',
ориентация: 'вертикальная',
right: 10,
top: 'center',
в диапазоне: {
цвет: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
}
},
календарь: {
top: 60,
left: 'center',
ориентация: 'вертикальная',
диапазон: ['2026-01-01', '2026-03-31'],
размер ячейки: [20, 20],
метка года: { показать: false },
метка дня: {
первыйДень: 1, // Начало недели в понедельник
имя: 'en'
},
метка месяца: { имя: 'en' }
},
серия: {
тип: 'тепловая карта',
системаКоординат: 'календарь',
данные: [
['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],
['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]
]
}
};
Тонкая настройка макета и стилей
Сочетание систем координат календаря с сериями рассеяния позволяет масштабировать размеры точек в зависимости от интенсивности, а не только цветовых блоков.
1. Календарь с бубликами рассеяния
Использование тип: 'рассеяние' на календаре системе координат создает интерактивные ежедневные индикаторы в виде пузырьков:
option = {
заголовок: {
текст: 'Объем ежедневных заказов',
left: 'center'
},
всплывающая подсказка: {
форматтер: function (params) {
return params.value[0] + ': ' + params.value[1] + ' заказов';
}
},
календарь: {
top: 80,
left: 40,
right: 40,
диапазон: '2026-05',
размер ячейки: ['auto', 25],
стильЭлемента: {
цвет: '#f8fafc',
borderWidth: 1,
borderColor: '#e2e8f0'
}
},
серия: {
тип: 'рассеяние',
системаКоординат: 'календарь',
размерСимвола: function (val) {
return val[1] / 10; // Масштабирует размер пузырька в зависимости от количества заказов
},
стильЭлемента: {
цвет: '#3b82f6',
прозрачность: 0.8
},
данные: [
['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],
['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]
]
}
};
Стратегические лучшие практики
- Соответствие дат формату ISO: Убедитесь, что даты внутри массива данных серии соответствуют стандартному
'ГГГГ-ММ-ДД'формату строк, чтобы сетка календаря точно отображала записи. - Настройте
первыйДеньдля региональной согласованности: ИспользуйтеметкаДня.первыйДень(установлено на0для воскресенья или1для понедельника) для соответствия местным календарным традициям вашей аудитории. - Сопоставьте кусочно-линейную визуальную карту для вкладов: При отображении графиков коммитов в стиле GitHub используйте
кусочно-линейнуютип визуальной карты с дискретными цветовыми остановками вместо непрерывных градиентов для более чётких категориальных визуальных шагов.