Lors du suivi des marchés financiers et des mouvements des prix des actifs au fil du temps, le Graphique en bougies est l’outil de visualisation standard de l’industrie. En combinant quatre points clés de prix — Ouverture, Maximum, Minimum et Clôture (OHLC) — en une seule barre visuelle, les graphiques en bougies montrent la volatilité des prix, la fourchette de trading et l’orientation du marché d’un coup d’œil, ce qui en fait un outil essentiel pour les tableaux de bord de performance boursière, les traqueurs de cryptomonnaies et les visualisations de trading des matières premières.
Le fonctionnement des bougies
Dans Apache ECharts, les séries en bougies sont rendues en utilisant type : 'candlestick' (ou l’alias 'k'). Chaque point de données nécessite un tableau à 4 valeurs ordonnées explicitement comme [Ouverture, Clôture, Plus bas, Plus haut]. Le moteur de graphique dessine un corps plein ou creux entre Ouverture et Clôture, avec des lignes fines « mèches » s’étendant jusqu’aux prix les plus bas et les plus hauts.
1. Configuration de base
Pour créer un graphique en bougies de base, mappez les valeurs temporelles sur un axe X continu et passez [Ouverture, Clôture, Plus bas, Plus haut] des tableaux dans vos données de série :
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], // [Ouverture, Clôture, Plus bas, Plus haut] -> Bullish (Clôture > Ouverture)
[40, 35, 30, 50], // Bearish (Clôture < Ouverture)
[31, 38, 33, 44],
[38, 15, 5, 42],
[15, 28, 10, 32]
]
}
]
};
Techniques structurelles avancées
Les graphiques en bougies peuvent être personnalisés selon les conventions internationales de couleur, des plages temporelles agrandies, ou combinés avec des moyennes mobiles.
1. Couleurs personnalisées et moyennes mobiles
Personnalisez les couleurs des barres haussières (haut) et baissières (bas) en utilisant itemStyle, et superposez des lignes de moyenne mobile en combinant des séries de lignes avec la série en bougies :
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross' }
},
legend: {
data: ['K quotidien', 'Moyenne mobile 5']
},
xAxis: {
type: 'category',
data: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim']
},
yAxis: {
type: 'value',
scale: true
},
series: [
{
name: 'K quotidien',
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', // Couleur pour les hausses (Clôture > Ouverture)
color0: '#6ab04c', // Couleur pour les baisses (Clôture < Ouverture)
borderColor: '#eb4d4b',
borderColor0: '#6ab04c'
}
},
{
name: 'Moyenne mobile 5',
type: 'line',
smooth: true,
data: [null, null, null, null, 2310, 2321, 2329],
lineStyle: { opacity: 0.8, width: 2 }
}
]
};
Affinage du layout et du zoom interactif
Ajouter des contrôles de zoom sur les séries temporelles donne aux utilisateurs une flexibilité lors de la navigation dans des enregistrements historiques de trading denses.
1. Contrôles de zoom des données et pointeurs d’axe
Intégrez des curseurs horizontaux et le zoom avec la molette de souris en utilisant le bloc de configuration dataZoom bloc de configuration :
option = {
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['Jour 1', 'Jour 2', 'Jour 3', 'Jour 4', 'Jour 5', 'Jour 6', 'Jour 7', 'Jour 8']
},
yAxis: {
type: 'value',
scale: true
},
dataZoom: [
{
type: 'inside', // Active le zoom avec la molette de souris
start: 20,
end: 100
},
{
type: 'slider', // Curseur de zoom visuel en bas
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]
]
}
]
};
Meilleures pratiques stratégiques
- Commander les données correctement : Vérifiez à nouveau la structure du tableau ! ECharts attend
[Ouverture, Clôture, Plus bas, Plus haut]—échanger Clôture et Plus bas est une source courante d’erreurs d’affichage. - Activez
scale: truesur l’axe Y : Incluez toujoursscale: truesur les axes de prix numériques afin que le graphique s’ajuste automatiquement à la plage de prix actuelle au lieu de forcer l’origine à zéro. - Utilisez les pointeurs d’axe en croix : Définissez
tooltip.axisPointer.type = 'cross'pour afficher des lignes de repère verticales et horizontales continues afin d’aligner facilement les prix et les horodatages.