Diagrammes circulaire, en anneau et jauge interactifs en R avec echarts4r
Montrez les parties d’un tout avec un diagramme circulaire ou en anneau, et un KPI dans sa plage avec une jauge
Créez des diagrammes circulaire, en anneau et jauge interactifs en R avec echarts4r — survolez une part pour lire sa proportion et son effectif, évidez le centre pour obtenir un anneau, et cadrez un seul KPI dans sa plage avec une jauge. Chaque graphique se charge à la demande pour que la page reste rapide.
Date de publication
9 juillet 2026
Modifié
9 juillet 2026
AstucePoints clés
echarts4r enveloppe Apache ECharts, une bibliothèque JavaScript de graphiques libre et open source, dans un pipe R épuré — e_charts() démarre un graphique, e_pie() ajoute des parts, e_gauge() dessine un cadran.
Un diagramme circulaire montre les parties d’un tout ; un anneau est un diagramme circulaire au centre évidé (définissez un rayon interne) ; une jauge cadre un seul nombre (un KPI) dans une plage.
Les diagrammes circulaires ne se lisent bien qu’avec quelques catégories — au-delà d’environ cinq parts, un diagramme en barres compare les valeurs bien plus précisément.
Sur cette page, chaque graphique interactif se cache derrière un poster statique que vous cliquez pour charger — la lourde bibliothèque de graphiques ne se télécharge qu’à la demande, pour que la page reste dans le budget de performance mobile.
Le poster statique est un simple graphique ggplot2, produit par du code que vous pouvez copier et exécuter — la version interactive, ce sont les mêmes données, rendues explorables.
Introduction
Un diagramme circulaire répond à une question : comment le tout se divise-t-il en parties ? Un anneau répond à la même question mais libère son centre pour une étiquette ou un total, et une jauge en répond à une autre — où ce seul nombre se situe-t-il dans sa plage ? Les trois sont des incontournables des tableaux de bord et des rapports, et les trois sont intégrés à echarts4r, qui apporte Apache ECharts — une bibliothèque de graphiques mature, libre et open source — dans R avec un workflow en pipe qui semble familier si vous connaissez le tidyverse.
Cette leçon construit chaque graphique deux fois : d’abord comme figure statique ggplot2 (la référence reproductible, et le poster à chargement rapide que vous voyez sur la page), puis comme widget interactif echarts4r que vous chargez d’un clic. Nous utilisons une seule petite table tout du long — le nombre de voitures par nombre de cylindres, issu du jeu de données intégré mtcars — pour que le diagramme circulaire, l’anneau et la jauge parlent tous des mêmes données.
NotePourquoi chaque graphique se charge au clic
Un widget ECharts interactif embarque environ 1 Mo de JavaScript et dessine sur un <canvas> HTML (une surface de dessin sur laquelle le navigateur peint des pixels). En charger plusieurs à la fois ralentirait la page sur un téléphone et dégraderait le Largest Contentful Paint (LCP) — le moment où le contenu principal devient visible — que Google mesure. Ainsi, sur cette page, chaque graphique interactif est d’abord représenté par une image statique ; cliquer sur ▶ Charger le graphique interactif insère le véritable widget echarts4r. Vous obtenez la vitesse d’une page statique et l’interactivité complète à la demande. Dans votre propre rapport ou application Shiny, il vous suffirait d’imprimer directement le widget — le code est identique.
La référence statique : un anneau ggplot2
Nous allons représenter combien de voitures de mtcars ont 4, 6 ou 8 cylindres. D’abord, construisez les effectifs avec R de base et dessinez un anneau avec ggplot2 — une barre empilée courbée en cercle par coord_polar(), au centre évidé grâce à xlim(). Cette figure statique est la référence reproductible et, sur cette page, l’image que la page charge en premier.
library(ggplot2)# Count cars by cylinder count (base R — no dplyr needed)d <-as.data.frame(table(Cylinders = mtcars$cyl))names(d) <-c("Cylinders", "n")ggplot(d, aes(x =2, y = n, fill = Cylinders)) +geom_col(width =1, color ="white") +coord_polar(theta ="y") +xlim(0.5, 2.5) +# a hole in the middle -> donutscale_fill_manual(values =c("#440154", "#21908c", "#fde725")) +# viridislabs(fill ="Cylinders",title ="Number of cars by cylinder count") +theme_void(base_size =13)
Trois couleurs viridis gardent les parts distinctes et adaptées au daltonisme, et theme_void() retire les axes dont un graphique circulaire n’a pas besoin. C’est une figure prête à publier. Rendons maintenant la même répartition explorable.
Votre premier diagramme circulaire interactif
echarts4r lit un data frame : vous nommez la colonne de catégorie dans e_charts(), puis ajoutez des parts avec e_pie(). L’argument radius définit le bord interne et externe de l’anneau — c("0%", "65%") signifie aucun trou (un diagramme circulaire plein) atteignant 65 % de la distance jusqu’au bord du panneau. Le pipe (|>) enchaîne les étapes, exactement comme l’ajout de couches dans ggplot2. Nous affectons le graphique à pie plutôt que de l’imprimer en ligne, pour que la page reste légère — puis le chargeons derrière le poster ci-dessous.
library(echarts4r)d <-as.data.frame(table(Cylinders = mtcars$cyl)) # same counts, self-containednames(d) <-c("Cylinders", "n")pie <- d |>e_charts(Cylinders) |># the category columne_pie(n, radius =c("0%", "65%")) |># slices from the count column, solid piee_color(c("#440154", "#21908c", "#fde725")) |># viridis, matching the static charte_tooltip() # show share + count on hover
Lisez le pipe de haut en bas : démarrez un graphique sur Cylinders, ajoutez des parts dimensionnées par n, colorez-les avec les trois valeurs viridis, activez les infobulles au survol. Enregistrez maintenant le widget et affichez-le derrière un poster.
Diagramme circulaire du nombre de voitures par nombre de cylindres. Survolez une part pour lire sa proportion et son effectif.
Survolez une part et ECharts affiche la catégorie, son effectif et son pourcentage du tout — l’interaction que vous ne pouvez pas obtenir d’un PNG statique. Tout le reste, ce sont les mêmes données et la même palette viridis.
Du diagramme circulaire à l’anneau
Un anneau est un diagramme circulaire avec un trou au milieu. Dans echarts4r, vous en créez un en donnant à e_pie() un rayon interne non nul : radius = c("45%", "70%") fait commencer l’anneau à 45 % de la distance et le termine à 70 %, laissant le centre vide. Ce centre vide est utile — les tableaux de bord y déposent souvent un total ou une étiquette.
Le seul changement par rapport au diagramme circulaire est la première valeur de radius : "0%" est devenu "45%". Tout le reste — les données, les couleurs, l’infobulle — est identique.
Diagramme en anneau des voitures par nombre de cylindres avec un centre évidé. La variante en anneau libère le centre pour une étiquette ou un total.
L’anneau se lit exactement comme le diagramme circulaire — mêmes parts, mêmes proportions — mais le milieu ouvert donne au graphique de l’espace pour respirer et un emplacement naturel pour un chiffre phare.
Une jauge pour un seul KPI
Les diagrammes circulaires et en anneau divisent un tout ; une jauge fait quelque chose de différent — elle place un nombre sur un cadran par rapport à une plage, comme le compteur de vitesse d’une voiture. Elle répond d’un coup d’œil à « quel niveau de remplissage ? » ou « quel niveau d’avancement ? ». Utilisez-la quand vous avez un seul indicateur clé de performance (KPI) — une seule métrique phare — plutôt qu’un ensemble de parties.
Ici, nous montrons la consommation moyenne de carburant des voitures de mtcars par rapport à une plage de 0 à 35 miles par gallon. Une jauge prend une seule valeur, une étiquette et un max, donc vous appelez e_charts() sans colonne de données et passez le nombre directement à e_gauge().
library(echarts4r)gauge <-e_charts() |>e_gauge(round(mean(mtcars$mpg), 1), "Mean MPG", max =35) |># value, label, range tope_tooltip()
round(mean(mtcars$mpg), 1) calcule le nombre moyen de miles par gallon (20.1) et l’arrondit à une décimale ; "Mean MPG" étiquette le cadran ; max = 35 fixe le haut de la plage pour que l’aiguille se positionne à un endroit sensé.
Jauge montrant le nombre moyen de miles par gallon par rapport à une plage de 0 à 35. Une jauge cadre un KPI dans sa plage.
Dans le graphique chargé, l’aiguille s’anime jusqu’à 20.1 et l’arc se remplit en conséquence — un résumé compact et lisible d’un coup d’œil d’une seule métrique qu’un diagramme circulaire ou en barres compliquerait à l’excès.
AvertissementQuand ne pas recourir à un diagramme circulaire
Les diagrammes circulaires et en anneau encodent la valeur par l’angle des parts, que l’œil compare bien moins précisément que la longueur d’une barre. Ils fonctionnent avec deux ou trois catégories claires ; au-delà d’environ cinq parts, les différences se brouillent et un diagramme en barres se lit bien mieux. La mise en garde sur les diagrammes circulaires de data-to-viz montre l’effet de façon frappante. Utilisez un diagramme circulaire pour une simple répartition partie-tout, et un diagramme en barres dès que vous avez plus d’une poignée de parties ou que le lecteur doit comparer des valeurs exactes.
NoteAfficher les données sous-jacentes
Chaque graphique de cette page utilise une seule petite table — le nombre de voitures par nombre de cylindres, issu de mtcars :
Number of cars by cylinder count in mtcars.
Cylinders
n
4
11
6
7
8
14
La jauge utilise un seul nombre dérivé — la moyenne de mtcars$mpg, 20.1 — par rapport à une plage de 0 à 35.
Problèmes fréquents
Mon infobulle affiche les effectifs mais je veux des pourcentages. ECharts ajoute déjà le pourcentage à une infobulle de diagramme circulaire/en anneau par défaut. Pour contrôler le texte, passez un formateur — par exemple e_tooltip(formatter = htmlwidgets::JS("function(p){ return p.name + ': ' + p.percent + '%'; }")) n’affiche que la proportion.
Le trou de mon anneau n’a pas la bonne taille. Le trou est la première valeur de radius. Un rayon interne plus grand signifie un anneau plus fin et un trou plus grand : radius = c("60%", "75%") est un anneau mince, c("30%", "70%") un anneau épais. Gardez la valeur interne en dessous de l’externe.
L’aiguille de ma jauge se trouve tout à droite (ou bouge à peine). La position de l’aiguille est la valeur par rapport à max. Si elle se colle à droite, votre valeur dépasse max — augmentez max. Si elle bouge à peine, max est bien plus grand que votre valeur — réduisez-le pour que la plage corresponde à la métrique.
Questions fréquentes
NoteQuand dois-je utiliser un diagramme circulaire plutôt qu’un diagramme en barres ?
N’utilisez un diagramme circulaire (ou en anneau) que pour une simple répartition partie-tout avec deux ou trois catégories, où l’idée est « ces morceaux composent le tout ». Dès que vous avez plus d’environ cinq parts, ou que le lecteur doit comparer des valeurs exactes, passez à un diagramme en barres — l’œil compare les longueurs de barres bien plus précisément que les angles d’un diagramme circulaire.
NoteComment transformer un diagramme circulaire en anneau dans echarts4r ?
Donnez à e_pie() un rayon interne non nul. radius = c("0%", "65%") est un diagramme circulaire plein ; radius = c("45%", "70%") laisse un trou au milieu, ce qui en fait un anneau. La première valeur est le bord interne, la seconde le bord externe.
NoteÀ quoi sert un graphique en jauge ?
Une jauge cadre un seul nombre — un KPI — dans une plage, comme un compteur de vitesse. Utilisez-la pour « quel niveau de remplissage / quel niveau d’avancement / à quelle distance de l’objectif » sur un tableau de bord, quand vous avez une seule métrique phare plutôt qu’un ensemble de parties. Pour plusieurs métriques à la fois, de petites barres ou des jauges séparées se lisent plus clairement.
Noteecharts4r est-il libre d’utilisation, même sur un site web commercial ?
Oui. echarts4r est publié sous la licence Apache 2.0 et enveloppe Apache ECharts, également sous Apache 2.0 — une licence permissive, libre et open source sans frais par site ni frais commercial. Vous pouvez l’utiliser dans des rapports, des tableaux de bord et des sites publics sans licence payante.
NoteComment ajouter une étiquette ou un total au milieu d’un anneau ?
Le centre évidé créé par le rayon interne d’un anneau est l’endroit où placer un titre ou un total. Ajoutez un titre centré avec e_title("32 cars", left = "center", top = "middle"), ou placez-y n’importe quelle annotation — le milieu vide est la raison même de préférer un anneau à un diagramme circulaire.
Testez vos connaissances
ImportantÀ vous : construire un anneau des types de transmission
À l’aide de mtcars intégré, comptez les voitures par transmission (am, où 1 correspond à manuelle et 0 à automatique), puis dessinez un anneau interactif avec echarts4r : des parts dimensionnées par l’effectif, un rayon interne pour que le centre soit évidé, des couleurs azur et ambre, et une infobulle au survol. Affectez-le à une variable et imprimez-le pour le visualiser.
AstuceIndice
Construisez les effectifs avec table() et as.data.frame() (comme dans la leçon), renommez am en “Automatic” / “Manual”, puis enchaînez e_charts(<category>) avec e_pie(<count>, radius = c("45%", "70%")). Définissez les couleurs avec e_color(c("#3a86d4", "#f5a524")) et ajoutez e_tooltip().
La première valeur non nulle de radius évide le centre ; survoler une part affiche son effectif et sa proportion.
Vérification rapide. Vous appelez e_pie(n, radius = c("0%", "60%")). Le résultat est-il un diagramme circulaire ou un anneau ?
AstuceAfficher la réponse
Un diagramme circulaire. Le rayon interne est "0%", donc il n’y a pas de trou — les parts se rejoignent au centre. Augmentez la première valeur (par exemple à "45%") pour l’évider en anneau.
Conclusion
echarts4r transforme une décomposition partie-tout en un graphique explorable : e_charts() définit la catégorie, e_pie() dessine les parts, et l’argument radius tranche entre un diagramme circulaire plein et un anneau évidé. Pour un seul KPI, e_gauge() cadre un nombre dans sa plage. Le poster statique ggplot2 garde la page rapide ; un clic révèle le graphique interactif complet. Recourez-y quand l’histoire est « les parties d’un tout » ou « un nombre en contexte » — et souvenez-vous qu’au-delà d’une poignée de parts, un diagramme en barres raconte mieux l’histoire.
@online{2026,
author = {},
title = {Diagrammes circulaire, en anneau et jauge interactifs en R
avec echarts4r},
date = {2026-07-09},
url = {https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-pie-donut-gauge},
langid = {fr}
}
