Skip to content
Learni
View all tutorials
Visualisation de données

Comment créer des graphiques interactifs avec ECharts en 2026

18 minEXPERT
JavaScriptVisualisationECharts

Introduction

ECharts s'impose comme la bibliothèque de visualisation de données la plus puissante pour les applications d'entreprise. Elle excelle dans le rendu de graphiques complexes avec des millions de points, des interactions fluides et un rendu vectoriel de haute qualité. En 2026, son intégration avec TypeScript et les frameworks modernes permet de créer des dashboards temps réel ultra-performants. Ce tutoriel vous guide pas à pas vers une maîtrise experte : de l'installation jusqu'à l'optimisation mémoire et aux renderers WebGL. Chaque étape inclut du code prêt à l'emploi pour éviter les pièges courants de performance et d'accessibilité.

Prérequis

  • Node.js 20+ et npm
  • Connaissances solides en TypeScript et JavaScript moderne
  • Compréhension des concepts de rendu canvas/WebGL
  • Projet React ou vanilla JS existant

Installation et configuration du projet

terminal
npm install echarts
npm install --save-dev @types/echarts typescript

L'installation via npm garantit la version la plus récente avec support complet TypeScript. Évitez les CDN en production pour un meilleur contrôle des bundles et du tree-shaking.

Création d'un graphique basique complet

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>ECharts Expert</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width:100%;height:600px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('chart'));
    const option = {
      title: { text: 'Ventes 2026' },
      tooltip: {},
      xAxis: { data: ['Jan', 'Fév', 'Mar'] },
      yAxis: {},
      series: [{ type: 'bar', data: [120, 200, 150] }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

Ce fichier HTML autonome initialise un graphique à barres interactif. Il sert de base pour tous les exemples suivants et permet un test immédiat sans build step.

Configuration avancée des séries

Passez à des visualisations multi-séries avec rendu personnalisé. Utilisez les dataset et transform pour gérer de gros volumes de données sans bloquer le thread principal.

Configuration avancée TypeScript

advanced-chart.ts
import * as echarts from 'echarts';

const chartDom = document.getElementById('chart')!;
const myChart = echarts.init(chartDom);

const option: echarts.EChartsOption = {
  dataset: {
    source: [
      ['product', '2025', '2026'],
      ['Laptop', 143, 215],
      ['Phone', 234, 312]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar', encode: { x: 'product', y: '2026' } },
    { type: 'line', encode: { x: 'product', y: '2025' } }
  ]
};
myChart.setOption(option);

Le typage strict avec EChartsOption évite les erreurs de configuration. Le dataset permet un filtrage et des transformations efficaces pour les dashboards complexes.

Gestion des événements et interactions

events.ts
myChart.on('click', (params) => {
  if (params.seriesType === 'bar') {
    console.log('Bar clicked:', params.name, params.value);
    // Exemple : ouvrir un modal avec détails
  }
});

myChart.on('legendselectchanged', (params) => {
  myChart.resize();
});

Les écouteurs d'événements permettent des interactions riches. Toujours nettoyer les listeners lors du démontage du composant pour éviter les fuites mémoire.

Optimisation performance WebGL

performance.ts
const chart = echarts.init(chartDom, null, {
  renderer: 'canvas',
  useDirtyRect: true,
  width: 'auto',
  height: 'auto'
});

// Pour très gros volumes :
// import 'echarts-gl';
// renderer: 'webgl' pour scatter 3D ou lignes haute densité

L'option useDirtyRect active le rendu incrémental. Passez à WebGL uniquement pour les millions de points afin de maintenir 60 FPS.

Bonnes pratiques

  • Toujours initialiser le graphique dans useEffect ou équivalent et appeler dispose() au démontage
  • Utiliser dataset + transform pour les gros volumes plutôt que de muter les séries
  • Activer useDirtyRect et limiter les appels setOption
  • Préférer le renderer canvas pour la compatibilité et WebGL pour la densité extrême
  • Ajouter des aria-labels pour l'accessibilité des graphiques

Erreurs courantes à éviter

  • Oublier d'appeler dispose() provoque des fuites mémoire et des ralentissements
  • Appeler setOption trop fréquemment sans throttle dégrade les performances
  • Ignorer les erreurs de dimensionnement sur les conteneurs flexibles
  • Utiliser des données brutes sans transformation pour plus de 100k points

Pour aller plus loin

Approfondissez vos compétences avec nos formations dédiées aux visualisations de données avancées. Découvrez nos formations Learni.