Lors du suivi des habitudes quotidiennes, du trafic sur site web, des journaux d’activité du serveur ou de l’intensité des ventes sur des années calendaires complètes, le Graphique calendrier fournit un agencement visuel efficace basé sur une grille. Inspiré des graphiques de contribution et des cartes thermiques saisonnières, le graphique calendrier représente des métriques quantitatives continues sur des jours calendaires précis, aidant les utilisateurs à repérer rapidement les pics d’activité, les variations du week-end et les motifs saisonniers sur plusieurs mois.
Le fonctionnement des graphiques calendrier
Dans Apache ECharts, les graphiques calendrier utilisent un système de coordonnées dédié calendrier combiné à un système de coordonnées carte thermique ou nuage de points de type série. Contrairement aux axes X et Y cartésiens standards, ECharts calcule automatiquement les positions des grilles jour et mois à l’aide de chaînes de dates.
1. Configuration de base
Pour créer une carte thermique annuelle de calendrier de base, définissez un composant calendriercomposant spécifiant une plage (par exemple, '2026'), attachez un visualMappour contrôler les gradients de couleur des métriques, et transmettez des tuples date-valeur quotidiens au format ['AAAA-MM-JJ', valeur]:
option = {
titre: {
haut: 10,
gauche: 'centre',
texte: 'Validations quotidiennes (2026)'
},
infobulle: {
formatteur: function (params) {
return params.valeur[0] + ': ' + params.valeur[1] + ' validations';
}
},
visualMap: {
min: 0,
max: 100,
type: 'par morceaux',
orientation: 'horizontale',
gauche: 'centre',
haut: 65,
dansPlage: {
couleur: ['#ebedf0', '#9be9a8', '#40c463', '#30a14e', '#216e39']
}
},
calendrier: {
haut: 120,
gauche: 30,
droite: 30,
tailleCellule: ['automatique', 13],
plage: '2026',
styleElement: {
épaisseurBordure: 0.5,
couleurBordure: '#ccc'
},
étiquetteAnnée: { afficher: false }
},
série: {
type: 'carte thermique',
systèmeCoordonnées: 'calendrier',
données: [
['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]
]
}
};
Techniques structurelles avancées
Les graphiques calendrier peuvent être adaptés pour des dispositions en défilement vertical ou personnalisés avec des représentations en nuage de points afin de visualiser des métriques quotidiennes discrètes.
1. Vue verticale du calendrier sur plusieurs mois
Modifier orient: 'vertical' sur le composant calendrier pour empiler les mois verticalement — idéal pour les widgets de tableau de bord hauts ou les mises en page mobiles :
option = {
titre: {
texte: 'Journal d'activité du Q1',
gauche: 'centré'
},
infobulle: {},
carteVisuelle: {
min: 0,
max: 500,
type: 'continue',
orient: 'vertical',
droite: 10,
haut: 'centré',
dansPlage: {
couleur: ['#fef0d9', '#fdcc8a', '#fc8d59', '#d7301f']
}
},
calendrier: {
haut: 60,
gauche: 'centré',
orient: 'vertical',
plage: ['2026-01-01', '2026-03-31'],
tailleCellule: [20, 20],
étiquetteAnnée: { afficher: false },
étiquetteJour: {
premierJour: 1, // Commencer la semaine le lundi
nomMap: 'en'
},
étiquetteMois: { nomMap: 'en' }
},
série: {
type: 'carteChaleur',
systèmeCoordonnées: 'calendrier',
données: [
['2026-01-05', 120], ['2026-01-18', 340], ['2026-02-02', 480],
['2026-02-20', 210], ['2026-03-15', 410], ['2026-03-28', 190]
]
}
};
Affinage du layout et du style
Combiner les systèmes de coordonnées calendrier avec des séries en nuage de points vous permet de faire évoluer la taille des points en fonction de l’intensité, et non uniquement des blocs de couleur.
1. Calendrier à bulles en nuage de points
Utilisation de type: 'scatter' sur un calendrier système de coordonnées crée des indicateurs journaliers interactifs en forme de bulles :
option = {
titre: {
texte: 'Volume quotidien des commandes',
gauche: 'centré'
},
infobulle: {
formatteur: function (params) {
return params.valeur[0] + ': ' + params.valeur[1] + ' commandes';
}
},
calendrier: {
haut: 80,
gauche: 40,
droite: 40,
plage: '2026-05',
tailleCellule: ['auto', 25],
styleÉlément: {
couleur: '#f8fafc',
épaisseurBordure: 1,
couleurBordure: '#e2e8f0'
}
},
série: {
type: 'scatter',
systèmeCoordonnées: 'calendrier',
tailleSymbole: function (val) {
return val[1] / 10; // Ajuste la taille de la bulle selon le nombre de commandes
},
styleÉlément: {
couleur: '#3b82f6',
opacité: 0.8
},
données: [
['2026-05-01', 120], ['2026-05-05', 240], ['2026-05-12', 180],
['2026-05-18', 310], ['2026-05-22', 90], ['2026-05-28', 270]
]
}
};
Meilleures pratiques stratégiques
- Correspondance des dates au format ISO : Assurez-vous que les dates dans votre tableau de données de série suivent le format standard
'AAAA-MM-JJ'formats de chaîne afin que la grille du calendrier puisse cartographier les enregistrements avec précision. - Configurez
premierJourpour une cohérence régionale : UtilisezétiquetteJour.premierJour(défini sur0pour dimanche ou1pour lundi) afin de correspondre aux conventions locales du calendrier de votre public. - Associez une carte visuelle par morceaux aux contributions : Lors du rendu de graphiques de validation de type GitHub, utilisez une
carte visuelle par morceauxde type carte visuelle avec des arrêts de couleur discrets plutôt que des dégradés continus pour des étapes visuelles catégoriques plus nettes.