Définissez les couleurs de la marque, appliquez un thème intégré, ajoutez une barre d’outils d’enregistrement/aperçu des données et activez l’accessibilité
Faites correspondre un graphique echarts4r à votre marque et donnez des contrôles au lecteur — définissez les couleurs avec e_color, appliquez un thème intégré avec e_theme, ajoutez une barre d’outils d’enregistrement d’image et d’aperçu des données avec e_toolbox_feature, et activez l’accessibilité avec e_aria. Chaque graphique se charge à la demande pour que la page reste rapide.
e_color() définit les couleurs des séries (azur de la marque, une palette de revue ou viridis) ; e_theme() applique tout un habillage intégré en un seul appel.e_toolbox_feature() ajoute une barre d’outils sur le graphique — "saveAsImage" exporte un PNG, "dataView" ouvre les chiffres bruts — pour que le lecteur puisse enregistrer ou inspecter le graphique sans aucun code supplémentaire.e_aria(enabled = TRUE) active la description Accessible Rich Internet Applications qu’ECharts génère pour les lecteurs d’écran — un gain d’accessibilité en une ligne.Un graphique arrive rarement avec la palette par défaut. Vous voulez qu’il corresponde à votre marque et — lorsqu’il est interactif — vous voulez donner des contrôles au lecteur : un bouton pour enregistrer l’image, un moyen de voir les chiffres derrière les barres, et une description qu’un lecteur d’écran peut énoncer. echarts4r fait tout cela avec de courtes étapes de pipe composables, si bien que vous ne quittez jamais le flux familier e_charts() |> e_bar() |> ….
Cette leçon prend un simple diagramme en barres et l’habille de quatre façons : des couleurs de marque avec e_color(), un thème intégré avec e_theme(), une barre d’outils avec e_toolbox_feature(), et l’accessibilité avec e_aria(). echarts4r et l’Apache ECharts sous-jacent sont tous deux libres et open source sous licence Apache 2.0 — aucun frais par site, que ce soit dans un rapport, un tableau de bord ou une page publique.
Un widget ECharts interactif embarque environ 1 Mo de JavaScript et dessine sur un canvas HTML (la surface de pixels sur laquelle le navigateur peint le graphique). En charger plusieurs à la fois ralentirait la page sur un téléphone et dégraderait son Largest Contentful Paint (LCP — la vitesse d’affichage du contenu principal). Ainsi, sur cette page, chaque graphique interactif commence par une image statique ; cliquer sur ▶ Charger le graphique interactif insère le véritable widget echarts4r. Vous obtenez une page statique rapide et une interactivité complète à la demande. Dans votre propre rapport ou application Shiny, vous imprimeriez directement le widget — le code echarts4r est identique.
Nous comptons les voitures par nombre de cylindres à partir du jeu de données intégré mtcars — un graphique à trois barres suffit pour voir clairement chaque étape de personnalisation. Préparez les données avec R de base (table()), puis tracez la référence aux couleurs de la marque avec ggplot2. Cette figure statique est la référence reproductible et le poster à chargement rapide que la page affiche 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(Cylinders, n)) +
geom_col(fill = "#3a86d4") + # brand azure, single series
labs(x = "Cylinders", y = "Number of cars",
title = "Cars by cylinder count") +
theme_minimal(base_size = 13)
La série unique utilise l’azur de la marque #3a86d4 et theme_minimal() la garde épurée. C’est l’apparence que nous reprendrons dans les versions interactives — echarts4r n’hérite pas du thème de ggplot2, nous définissons donc la couleur explicitement dans chaque pipe.
Démarrez le graphique interactif de la manière habituelle : nommez la colonne de catégories dans e_charts(), ajoutez une série de barres avec e_bar(), puis définissez la couleur avec e_color(). Deux étapes supplémentaires le rendent conforme à la marque et accessible — e_tooltip() affiche la valeur exacte au survol, et e_aria(enabled = TRUE) active la description ARIA (Accessible Rich Internet Applications) qu’ECharts construit pour les lecteurs d’écran. Nous affectons le graphique à une variable plutôt que de l’imprimer, pour que la page reste légère, puis nous le chargeons derrière un poster.
library(echarts4r)
brand <- d |>
e_charts(Cylinders) |> # the category (x) axis
e_bar(n, name = "Cars") |> # a bar series from the count column
e_color("#3a86d4") |> # brand azure, matching the static chart
e_tooltip() |> # exact value on hover
e_aria(enabled = TRUE) |> # screen-reader description (ARIA)
e_legend(show = FALSE) # one series — no legend neededLisez le pipe de haut en bas : démarrez un graphique sur Cylinders, ajoutez une série de barres n nommée “Cars”, colorez-la en azur, activez l’infobulle au survol, et activez la description ARIA. e_color() accepte n’importe quelle couleur — un code hexadécimal comme "#3a86d4", une couleur R nommée, ou un vecteur pour plusieurs séries (l’azur #3a86d4 + l’ambre #f5a524 forment une paire lisible et adaptée au daltonisme ; un vecteur viridis fonctionne aussi).
Un diagramme en barres du nombre de voitures par cylindre en azur de la marque. Les couleurs de la marque plus e_aria rendent le graphique conforme à la marque et accessible — survolez n’importe quelle barre pour lire son décompte exact.
La couleur correspond au graphique statique, et la description ARIA est désormais disponible pour les technologies d’assistance. e_aria() coûte une ligne et ne demande rien au lecteur — un bon réglage par défaut sur tout graphique public.
e_color() définit les couleurs des séries ; e_theme() redessine le graphique entier — arrière-plan, lignes des axes, couleurs des étiquettes et palette par défaut — à partir d’un préréglage intégré. ECharts fournit un ensemble de thèmes prêts à l’emploi ; "westeros" en est un, épuré et discret. Insérez-le en une seule étape :
themed <- d |>
e_charts(Cylinders) |>
e_bar(n, name = "Cars") |>
e_theme("westeros") |> # a bundled ECharts theme (colours + background + axes)
e_tooltip() |>
e_legend(show = FALSE)e_theme("westeros") change tout l’habillage — arrière-plan, lignes des axes et palette — en un seul appel. Le bloc ne fait qu’affecter themed, si bien que rien ne s’affiche en ligne ; nous l’enregistrons et le chargeons derrière le poster ci-dessous. D’autres noms intégrés incluent "infographic", "macarons", "shine" et "roma" — essayez-en quelques-uns et gardez celui qui convient.
Le thème intégré westeros redessine tout le graphique. Chargez-le pour le comparer à la version aux couleurs de la marque.
e_theme() applique un thème ECharts intégré
e_theme() utilise un thème fourni avec echarts4r ; ce n’est pas la même chose que votre theme_minimal() de ggplot2. La liste complète des noms intégrés — et comment enregistrer un thème JSON personnalisé — se trouve dans la documentation des thèmes echarts4r. Si vous voulez une apparence de marque exacte, définissez vous-même les couleurs avec e_color() (comme ci-dessus) plutôt que de vous fier à un préréglage.
La barre d’outils est une barre intégrée au graphique que le lecteur contrôle. Ajoutez les fonctionnalités une par une avec e_toolbox_feature() — passez le nom de la fonctionnalité comme argument feature. Deux sont particulièrement utiles : "saveAsImage" fournit un bouton de téléchargement qui exporte le graphique actuel en PNG, et "dataView" ouvre un panneau montrant les chiffres bruts derrière le graphique (et permet au lecteur de les copier). Enchaînez un appel par fonctionnalité :
toolbox <- d |>
e_charts(Cylinders) |>
e_bar(n, name = "Cars") |>
e_color("#3a86d4") |>
e_tooltip() |>
e_aria(enabled = TRUE) |>
e_legend(show = FALSE) |>
e_toolbox_feature(feature = "saveAsImage") |> # export the chart as a PNG
e_toolbox_feature(feature = "dataView") # open the raw data panelChaque e_toolbox_feature() ajoute un bouton à la barre d’outils dans le coin du graphique chargé. Il existe d’autres fonctionnalités — "restore" réinitialise la vue, "dataZoom" ajoute un zoom par cadre — mais l’enregistrement d’image et l’aperçu des données sont les deux que la plupart des lecteurs utilisent.
Le même diagramme en barres avec une barre d’outils de boutons d’export et d’aperçu des données. La barre d’outils permet au lecteur d’enregistrer le graphique en tant qu’image ou d’inspecter ses données.
Chargez le graphique et regardez le coin supérieur droit : l’icône de téléchargement enregistre un PNG, et l’icône de liste ouvre l’aperçu des données. Ce sont deux interactions qu’un PNG statique ne peut pas offrir — et aucune ne demande de code au lecteur.
Chaque graphique de cette page trace le même tableau de trois lignes — le nombre de voitures dans mtcars pour chaque nombre de cylindres :
| Cylinders | n |
|---|---|
| 4 | 11 |
| 6 | 7 |
| 8 | 14 |
e_theme() semble écraser mon e_color(). Un thème définit sa propre palette, il peut donc l’emporter sur un e_color() précédent. Décidez de ce que vous voulez : utilisez e_theme() pour toute l’apparence d’un préréglage, ou e_color() pour des couleurs de marque exactes. Si vous avez besoin à la fois d’un thème d’arrière-plan et de vos propres barres, placez e_color() après e_theme() dans le pipe pour qu’il s’applique en dernier.
Les boutons de la barre d’outils n’apparaissent pas. Vérifiez que vous avez appelé e_toolbox_feature() (au singulier, feature =) une fois par bouton, et que vous regardez le widget chargé — le poster statique de cette page n’a pas de barre d’outils. Si rien n’apparaît du tout, assurez-vous que le nom de la fonctionnalité est écrit exactement, p. ex. "saveAsImage" et "dataView" (camelCase).
Rien n’apparaît — la page n’affiche que le poster. C’est voulu sur ce site : cliquez sur ▶ Charger le graphique interactif et le véritable widget se charge. Dans votre propre document, imprimez l’objet (ou faites-en la dernière ligne d’un chunk) et il s’affiche directement, sans poster.
Ajoutez e_color() au pipe. Passez une couleur pour une série unique (e_color("#3a86d4")) ou un vecteur pour plusieurs séries (e_color(c("#3a86d4", "#f5a524"))). Il accepte les codes hexadécimaux, les couleurs R nommées, ou un vecteur viridis tel que viridisLite::viridis(3).
echarts4r fournit plusieurs thèmes ECharts, dont "westeros", "infographic", "macarons", "shine", "roma", "vintage" et "dark". Appliquez-en un avec e_theme("name"). La liste complète et les instructions pour un thème personnalisé se trouvent dans la documentation des thèmes echarts4r.
Ajoutez e_toolbox_feature(feature = "saveAsImage"). Cela place un bouton de téléchargement dans la barre d’outils du graphique qui exporte la vue actuelle en PNG — aucun serveur ni code supplémentaire nécessaire.
Appelez e_aria(enabled = TRUE). Cela active la description ARIA (Accessible Rich Internet Applications) qu’ECharts génère à partir de vos données, afin que les lecteurs d’écran puissent annoncer ce que montre le graphique. Associez-la à des noms d’axes explicites et à une légende de figure descriptive.
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.
À partir de mtcars intégré, comptez les voitures par nombre de vitesses (gear) avec table(), puis construisez un diagramme en barres interactif avec echarts4r qui : utilise l’azur de la marque #3a86d4, affiche une infobulle au survol, active l’accessibilité, et ajoute un bouton d’enregistrement d’image et un bouton d’aperçu des données. Affectez-le à une variable et imprimez-le pour le voir.
Construisez les données avec as.data.frame(table(Gears = mtcars$gear)) et renommez la colonne de décompte en n. Puis enchaînez e_charts(Gears) |> e_bar(n) avec e_color("#3a86d4"), e_tooltip(), e_aria(enabled = TRUE), et deux appels e_toolbox_feature() — un par bouton.
library(echarts4r)
d <- as.data.frame(table(Gears = mtcars$gear))
names(d) <- c("Gears", "n")
d |>
e_charts(Gears) |>
e_bar(n, name = "Cars") |>
e_color("#3a86d4") |>
e_tooltip() |>
e_aria(enabled = TRUE) |>
e_legend(show = FALSE) |>
e_toolbox_feature(feature = "saveAsImage") |>
e_toolbox_feature(feature = "dataView")Chaque e_toolbox_feature() ajoute un bouton ; e_aria(enabled = TRUE) fournit la description pour le lecteur d’écran.
Vérification rapide. Vous voulez que le graphique conserve vos couleurs de marque exactes et un arrière-plan thématisé. Vous écrivez … |> e_color("#3a86d4") |> e_theme("westeros"). Les barres restent-elles azur ?
Pas de façon fiable. e_theme() applique sa propre palette, et comme il vient après e_color() dans le pipe il peut écraser les barres azur. Placez e_color("#3a86d4") après e_theme("westeros") pour que votre couleur s’applique en dernier et l’emporte.
Thématiser un graphique echarts4r tient en une poignée d’étapes de pipe : e_color() définit les couleurs des séries, e_theme() applique tout un habillage intégré, e_toolbox_feature() offre au lecteur des boutons d’enregistrement d’image et d’aperçu des données, et e_aria() rend le graphique accessible. Le poster statique ggplot2 garde la page rapide ; un clic révèle la version interactive complète. Les mêmes étapes s’appliquent à tout type de graphique echarts4r — barres, courbes, nuages de points, et plus encore.
Prouvez que vous savez le faire. Maîtrisez toute la série echarts4r — suivez votre parcours, construisez des projets et obtenez un certificat.
Passez à Pro — Prova illimité sur vos propres données et un certificat vérifiable qui atteste la compétence.
dès 15 $/mois facturé annuellement
✓ Vous êtes Pro — continuez. The runtime is the judge.
Prêt à passer à la vitesse supérieure ?
@online{2026,
author = {},
title = {Personnaliser les graphiques echarts4r en R~: couleurs,
thèmes et barre d’outils},
date = {2026-07-09},
url = {https://www.datanovia.com/learn/data-visualization/echarts4r/interactive-theming},
langid = {fr}
}