Quando rastrear hábitos diários, tráfego de sites, registros de atividade de servidores ou intensidade de vendas ao longo de anos calendários completos, o Gráfico de Calendário fornece uma disposição visual eficaz baseada em grade. Inspirado em gráficos de contribuições e mapas de calor sazonais, os gráficos de calendário mapeiam métricas quantitativas contínuas em dias específicos do calendário, ajudando os usuários a identificar picos de atividade, variações de fim de semana e padrões sazonais de múltiplos meses de um só olhar.
Os Mecanismos dos Gráficos de Calendário
No Apache ECharts, os gráficos de calendário usam um sistema de coordenadas dedicado calendário combinado com um mapa de calor ou dispersão tipo de série. Em vez de eixos cartesianos padrão X e Y, o ECharts calcula automaticamente as posições da grade de dia e mês usando strings de data.
1. Configuração Básica
Para criar um mapa de calor anual básico de calendário, defina um calendário componente especificando um intervalo (por exemplo, '2026'), anexe um visualMap para controlar os gradientes de cor das métricas e passe tuplas diárias de data-valor formatadas como ['AAAA-MM-DD', valor]:
option = {
title: {
top: 10,
left: 'center',
text: 'Confirmações Diárias (2026)'
},
tooltip: {
formatter: function (params) {
return params.value[0] + ': ' + params.value[1] + ' confirmações';
}
},
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]
]
}
};
Técnicas Estruturais Avançadas
Os gráficos de calendário podem ser adaptados para layouts de rolagem vertical ou personalizados com representações de dispersão para visualizar métricas diárias discretas.
1. Visualização Vertical de Calendário de Vários Meses
Mude orient: 'vertical' no componente calendário para empilhar os meses verticalmente — ideal para widgets de painel altos ou layouts móveis:
option = {
title: {
text: 'Registro de Atividades do Q1',
left: 'center'
},
tooltip: {},
visualMap: {
min: 0,
max: 500,
type: 'contínuo',
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, // Iniciar a semana na segunda-feira
nameMap: 'en'
},
monthLabel: { nameMap: 'en' }
},
series: {
type: 'heatmap',
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]
]
}
};
Ajuste fino do layout e do estilo
Combinar sistemas de coordenadas de calendário com séries de dispersão permite escalar os tamanhos dos pontos com base na intensidade, em vez de blocos de cor apenas.
1. Calendário de Bolhas de Dispersão
Usando type: 'scatter' em um calendário sistema de coordenadas cria indicadores diários interativos do tipo bolha:
option = {
title: {
text: 'Volume Diário 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 o tamanho da bolha de acordo com a contagem 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]
]
}
};
Melhores Práticas Estratégicas
- Alinhe as datas ao formato ISO: Certifique-se de que as datas dentro do seu array de dados da série sigam o padrão
'AAAA-MM-DD'formatos de string para que a grade do calendário mapeie os registros com precisão. - Configure
firstDaypara consistência regional: UsedayLabel.firstDay(definido como0para domingo ou1para segunda-feira) para corresponder às convenções locais do calendário do seu público. - Combine Mapa Visual por Trechos para Contribuições: Ao renderizar gráficos de commit no estilo GitHub, use um
por trechostipo de mapa visual com paradas de cor discretas em vez de gradientes contínuos para etapas visuais categóricas mais limpas.