11 points par GN⁺ 2025-04-09 | 2 commentaires | Partager sur WhatsApp
  • ECharts est une bibliothèque de visualisation JavaScript open source, optimisée à la fois pour PC et mobile
  • Compatible avec la plupart des navigateurs modernes, dont Internet Explorer 9/10/11, Chrome, Firefox et Safari
  • S’appuie sur son propre moteur de rendu graphique, ZRender, pour fournir des graphiques de haute qualité, intuitifs et interactifs

Large choix de types de graphiques

  • Prend en charge les graphiques en lignes, en barres, les nuages de points, les diagrammes circulaires, les chandeliers, les boxplots, les cartes, les heatmaps, les graphiques en lignes directionnelles, les graphes de relations, les treemaps, les sunbursts, les coordonnées parallèles, les funnel charts, les jauges, etc.
  • Possibilité de combiner plusieurs types de visualisation pour créer des graphiques composites
  • Prise en charge des séries de graphiques personnalisées : il suffit de fournir la fonction de rappel renderItem pour implémenter librement les éléments graphiques souhaités
  • Les fonctionnalités interactives sont intégrées et peuvent être utilisées immédiatement sans configuration supplémentaire

Allègement et téléchargement sélectif des composants

  • Le package de base est fortement optimisé, mais il est possible de créer un package léger en ne sélectionnant que les types de graphiques et composants nécessaires
  • Un bundle personnalisé contenant uniquement les fonctionnalités requises peut être téléchargé via le builder en ligne

Prise en charge de divers formats de données

  • Depuis la v4.0, la propriété dataset prend en charge diverses structures de données, comme les tableaux à deux dimensions et les objets clé-valeur
  • La propriété encode permet de mapper intuitivement la structure des données
  • Permet de gagner du temps sur l’écriture d’algorithmes de transformation de données et de minimiser l’usage mémoire
  • Un même dataset peut être partagé entre plusieurs composants
  • Prise en charge de TypedArray pour économiser la mémoire et améliorer les performances

Optimisation pour la visualisation de grands volumes de données

  • Propose une technologie de rendu incrémental pour visualiser des millions de points de données
  • Les fonctionnalités interactives comme le zoom et le déplacement restent fluides même sur de gros volumes de données
  • Prise en charge du rendu de données en streaming via WebSocket
  • Permet la visualisation sans charger l’intégralité des données

Optimisation mobile

  • Optimisé pour les fonctions de zoom et de déplacement en environnement mobile
  • Sur PC, les mêmes manipulations sont possibles via la molette de la souris
  • Fournit un package compact pour mobile
  • Le choix du moteur de rendu SVG permet de réduire davantage l’utilisation mémoire

Différents modes de rendu et compatibilité multiplateforme

  • Prend en charge différents modes de rendu, dont Canvas, SVG (v4.0 et plus) et VML
  • VML assure la compatibilité avec les anciens navigateurs IE, SVG est plus économe en mémoire sur mobile, et Canvas est performant pour les gros volumes
  • Dans un environnement Node.js, le rendu côté serveur (SSR) est possible via node-canvas
  • Utilisable aussi dans WeChat MiniProgram
  • Des extensions communautaires ont également été développées pour Python (pyecharts), R (echarty) et Julia (ECharts.jl)
  • Grâce à la prise en charge de nombreuses plateformes et de plusieurs langages, les développeurs peuvent se concentrer uniquement sur la visualisation

Exploration des données basée sur l’interactivité

  • Le zoom, le panoramique et le filtrage permettent d’explorer les données détaillées à partir de l’ensemble du jeu de données
  • Fournit divers composants interactifs comme legend, visualMap, dataZoom, tooltip et brush
  • Permet d’explorer les données de multiples façons depuis l’interface utilisateur

Renforcement de la visualisation de données multidimensionnelles

  • Depuis ECharts 3, la prise en charge de la visualisation de données multidimensionnelles a été renforcée
  • Au-delà des visualisations multidimensionnelles traditionnelles comme les coordonnées parallèles, les données peuvent être représentées de diverses manières
  • Le composant visualMap permet de mapper des dimensions de données à des propriétés visuelles telles que la couleur, la taille, la transparence ou l’ombrage

Mise à jour des données en temps réel

  • Les modifications du dataset sont répercutées en temps réel sur le graphique
  • Les changements de données sont détectés automatiquement et représentés sur le graphique via des animations
  • Le composant timeline permet également de représenter les données selon l’écoulement du temps

Effets visuels spéciaux

  • Des effets visuels peuvent être appliqués à tous les types de données, y compris les points, les lignes et les données géographiques
  • Permet d’attirer l’attention des utilisateurs et d’améliorer la transmission des informations

Visualisation 3D basée sur WebGL

  • ECharts GL, basé sur WebGL, prend en charge diverses visualisations 3D comme les globes terrestres, les bâtiments ou les histogrammes de population
  • Il suffit de quelques réglages simples pour ajouter des effets visuels
  • Peut aussi être utilisé en VR et sur grand écran

Prise en charge de l’accessibilité

  • Conforme au standard d’accessibilité WAI-ARIA du W3C
  • Génère automatiquement des descriptions pour les personnes malvoyantes à partir des informations de configuration du graphique
  • Rend le contenu de visualisation accessible via les lecteurs d’écran

2 commentaires

 
jhk0530 2025-04-09

ECharts est joli et convaincant. Personnellement, je l’ai trouvé plus facile à utiliser que Highcharts.

 
GN⁺ 2025-04-09
Avis Hacker News
  • En développant Briefer, j’ai testé presque toutes les bibliothèques de visualisation, et Apache ECharts est de loin la meilleure

    • Les principaux problèmes des autres bibliothèques sont : (a) le design laisse à désirer (b) elles sont difficiles à utiliser (c) elles manquent de flexibilité
    • Apache ECharts résout ces problèmes
    • C’est beau par défaut, on peut calculer une spécification déclarative côté back-end puis l’envoyer au front-end, et c’est assez flexible pour prendre en charge tout ce que font les outils de BI traditionnels
    • Tout ce dont on a besoin est déjà inclus, sans avoir à ajouter de nouvelles fonctionnalités
    • Ravi de voir ce formidable travail sur HN
  • Je recommande aussi go-echarts

    • On peut déclarer des graphiques avec des types Golang, et le sérialiseur JSON de Golang les lie automatiquement au JSON
    • Je l’ai utilisé dans plusieurs projets, et le mainteneur répond rapidement quand il y a des issues ou des PR
    • C’est amusant d’intégrer des fonctions JavaScript et des requêtes SQL dans du Go
    • Il existe un exemple en Golang qui récupère des données depuis DuckDB et génère un fichier de graphique en chandeliers avec des infobulles JavaScript
  • Après avoir essayé beaucoup d’autres bibliothèques, j’ai choisi Apache ECharts l’an dernier et je ne le regrette pas

    • Excellente documentation, bonnes performances, forte configurabilité, facilité d’utilisation et prise en charge de tous les types de graphiques dont j’ai besoin
  • Je pense qu’ECharts est la meilleure bibliothèque

    • Elle apparaît rarement dans les listes ou les recherches de bibliothèques de graphiques
    • J’ai tout essayé : chart.js, google charts, amCharts, Highcharts, ApexCharts
    • Nous l’utilisons dans notre outil/bibliothèque
  • J’utilise Apache ECharts dans un produit depuis 2020

    • Je le recommande vivement : excellente bibliothèque, excellente documentation, aucun problème en 5 ans
    • J’aimerais des améliorations sur les tickets liés à l’accessibilité clavier
  • La course de lignes est vraiment très sympa

    • On peut démarrer la course en basculant l’interrupteur
    • Bien joué la Norvège
  • Si vous cherchez une bibliothèque de graphiques pour un client web, je recommande aussi charts.css

    • Le concept est bien plus simple que celui de la plupart des bibliothèques de graphiques, tout en permettant d’obtenir les mêmes fonctionnalités
    • C’est très simple à utiliser avec le rendu côté serveur, htmx, etc.
  • Quand je vois l’annonce d’un package de graphiques JS appelé ECharts, je me dis que sa maintenance s’arrêtera d’ici un an

    • Quand je vois l’annonce d’un package de graphiques JS appelé Apache ECharts, je me dis qu’il sera encore maintenu l’an prochain
  • Je cherchais une bibliothèque de graphiques pour React/React Native, et Apache ECharts est un excellent candidat pour la visualisation de données cross-platform

    • react-echarts et react-native-echarts sont tous deux activement développés
    • Le fait d’être sous Apache est un gros avantage pour les perspectives de développement futur et de maintenance du projet
  • J’ai ajouté ECharts comme bibliothèque de graphiques pour l’IA, et je suis en train de migrer les graphiques de l’interface GUI par défaut vers ECharts

    • J’ai fait une revue approfondie avant de choisir, et j’ai retenu ECharts parce qu’il est excellent et très esthétique