Cuando se rastrean hábitos diarios, tráfico de sitios web, registros de actividad del servidor o intensidad de ventas durante años calendario completos, el Gráfico de calendario proporciona una disposición visual eficaz basada en cuadrícula. Inspirado en gráficos de contribuciones y mapas de calor estacionales, el gráfico de calendario representa métricas cuantitativas continuas en días específicos del calendario, ayudando a los usuarios a identificar picos de actividad, variaciones de fin de semana y patrones estacionales de varios meses a simple vista.
La mecánica de los gráficos de calendario
En Apache ECharts, los gráficos de calendario utilizan un sistema de coordenadas dedicado calendario combinado con un mapa de calor o dispersión tipo de serie. En lugar de los ejes X y Y cartesianos estándar, ECharts calcula automáticamente las posiciones de cuadrícula de día y mes utilizando cadenas de fecha.
1. Configuración esencial
Para crear un mapa de calor anual básico de calendario, define un calendario componente que especifica un rango (por ejemplo, '2026'), adjunta un visualMap para controlar los gradientes de color de la métrica, y pasa las tuplas de fecha-valor diarias con formato ['AAAA-MM-DD', valor]:
option = {
titulo: {
arriba: 10,
izquierda: 'centro',
texto: 'Confirmaciones diarias (2026)'
},
tooltip: {
formato: function (params) {
return params.value[0] + ': ' + params.value[1] + ' confirmaciones';
}
},
visualMap: {
min: 0,
max: 100,
tipo: 'por partes',
orientación: 'horizontal',
izquierda: 'centro',
arriba: 65,
enRango: {
color: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
}
},
calendario: {
arriba: 120,
izquierda: 30,
derecha: 30,
tamañoCelda: ['auto', 13],
rango: '2026',
estiloItem: {
anchoBorde: 0.5,
colorBorde: '#ccc'
},
etiquetaAño: { mostrar: false }
},
serie: {
tipo: 'mapa de calor',
sistemaCoordenadas: 'calendario',
datos: [
['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]
]
}
};
Técnicas estructurales avanzadas
Los gráficos de calendario se pueden adaptar para diseños de desplazamiento vertical o personalizarse con representaciones de dispersión para visualizar métricas diarias discretas.
1. Vista de calendario vertical de múltiples meses
Cambia orient: 'vertical' en el componente de calendario para apilar los meses verticalmente, ideal para widgets de paneles de control altos o diseños móviles:
option = {
title: {
text: 'Registro de Actividad Q1',
left: 'center'
},
tooltip: {},
visualMap: {
min: 0,
max: 500,
type: 'continuo',
orient: 'vertical',
right: 10,
top: 'center',
inRange: {
color: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
}
},
calendar: {
top: 60,
left: 'center',
orient: 'vertical',
range: ['2026-01-01', '2026-03-31'],
cellSize: [20, 20],
yearLabel: { show: false },
dayLabel: {
firstDay: 1, // Comienza la semana el lunes
nameMap: 'en'
},
monthLabel: { nameMap: 'en' }
},
series: {
type: 'mapa de calor',
coordinateSystem: 'calendar',
data: [
['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],
['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]
]
}
};
Afinando el diseño y el estilo
Combinar sistemas de coordenadas de calendario con series de dispersión te permite escalar el tamaño de los puntos según la intensidad, en lugar de usar solo bloques de color.
1. Calendario de burbujas de dispersión
Usando type: 'scatter' en un calendario sistema de coordenadas crea indicadores diarios interactivos con estilo de burbujas:
option = {
title: {
text: 'Volumen diario de pedidos',
left: 'center'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' pedidos';
}
},
calendar: {
top: 80,
left: 40,
right: 40,
range: '2026-05',
cellSize: ['auto', 25],
itemStyle: {
color: '#f8fafc',
borderWidth: 1,
borderColor: '#e2e8f0'
}
},
series: {
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: function (val) {
return val[1] / 10; // Escala el tamaño de la burbuja según el número de pedidos
},
itemStyle: {
color: '#3b82f6',
opacity: 0.8
},
data: [
['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],
['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]
]
}
};
Prácticas recomendadas estratégicas
- Alinea las fechas con el formato ISO: Asegúrate de que las fechas dentro de tu matriz de datos de series sigan el formato estándar
'AAAA-MM-DD'formatos de cadena para que la cuadrícula del calendario mapee los registros con precisión. - Configura
firstDaypara consistencia regional: UsadayLabel.firstDay(configurado en0para el domingo o1para el lunes) para ajustarse a las convenciones locales del calendario de su audiencia. - Asocie un mapa visual por tramos para contribuciones: Al representar gráficos de confirmaciones estilo GitHub, use un
mapa visual por tramostipo de mapa visual con paradas de color discretas en lugar de gradientes continuos para pasos visuales categóricos más limpios.