Sortie d’Apache ECharts 5.6

 (echarts.apache.org)
11 points par GN⁺ 2025-04-09 | 2 commentaires | Partager sur WhatsApp
  • Apache ECharts est une bibliothèque open source de visualisation JavaScript permettant d’implémenter rapidement des visualisations sur le web
  • Il est possible de combiner plus de 20 types de graphiques et plusieurs composants, offrant une grande flexibilité pour construire des tableaux de bord et des écrans d’analyse
  • Grâce au basculement entre Canvas et SVG, au rendu progressif et au chargement en flux, il prend en charge le rendu en temps réel de 10 millions de points de données
  • La gestion basée sur les datasets ainsi que les transformations de données comme le filtrage, le clustering et la régression permettent de l’utiliser dans des flux d’analyse multidimensionnelle
  • Il fournit des descriptions de graphiques générées automatiquement et des motifs en décalcomanie, afin que les utilisateurs ayant besoin d’accessibilité puissent plus facilement comprendre le contenu et le contexte des graphiques

Aperçu d’Apache ECharts

  • Apache ECharts est une bibliothèque open source de visualisation JavaScript
  • Le site officiel est disponible à l’adresse https://echarts.apache.org
  • La page d’accueil annonce la publication d’Apache ECharts 6.1 et invite à consulter le changelog
  • Les ressources de démarrage et les exemples sont proposés via Get Started et Demo

Fonctionnalités

  • Graphiques et composants

    • Plus de 20 types de graphiques sont fournis par défaut
    • Environ 12 composants sont également proposés, et chaque élément peut être combiné librement selon les besoins

  • Rendu et données volumineuses

    • Il est facile de basculer entre le rendu Canvas et SVG
    • Le rendu progressif et le chargement en flux permettent le rendu en temps réel de 10 millions de points de données

  • Analyse de données

    • Les données sont gérées via des datasets
    • Il prend en charge des transformations de données comme le filtrage, le clustering et la régression, ce qui permet d’analyser les mêmes données sous plusieurs dimensions

  • Design visuel

    • Le design par défaut suit les principes de la visualisation
    • Il prend en charge le responsive design et peut être personnalisé grâce à une configuration flexible

  • Communauté et extensions

    • Une communauté open source active poursuit le développement du projet
    • Diverses extensions tierces sont également disponibles

  • Accessibilité

    • Il fournit des descriptions de graphiques générées automatiquement
    • Les motifs en décalcomanie aident les utilisateurs en situation de handicap à comprendre le contenu et le contexte des graphiques

Références citées et canaux communautaires

  • Les utilisateurs d’ECharts peuvent citer l’article de référence dans des projets de R&D, des produits, des articles de recherche, des rapports techniques, des actualités, des livres, des présentations, des formations, des brevets et d’autres activités associées
  • L’article à citer est disponible ici : Visual Informatics, 2018 PDF
  • Les canaux de mise à jour indiqués sont GitHub, WeChat, Weibo et le compte X

À lire aussi

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 sur Hacker News

  • En créant Briefer (https://briefer.cloud), j’ai essayé presque toutes les bibliothèques de visualisation, et je peux dire avec assurance qu’Apache ECharts est la meilleure
    Les autres bibliothèques sont généralement laides, difficiles à utiliser parce qu’il faut les manipuler de façon impérative, ou manquent de flexibilité
    ECharts a un design par défaut agréable, permet de calculer côté back-end des spécifications de graphes déclaratives puis de n’envoyer au front-end que la spécification à rendre, et est assez flexible pour prendre en charge presque tout ce que font les outils de BI traditionnels
    Je n’ai jamais eu besoin d’étendre la bibliothèque pour une nouvelle fonctionnalité : tout ce dont j’avais besoin y était déjà

    • En plus de cela, ECharts a été quasiment la seule dépendance du projet que l’on pouvait mettre à niveau sans craindre de tout casser
      Même lors de la mise à niveau de 3.x vers 5.x, un simple npm update a suffi pour que tout continue à bien fonctionner, ce qui inspire une confiance rare de nos jours
      Il convient bien aussi bien au SSR qu’aux SPA, et comme il est en grande partie en JavaScript pur, il fonctionne de façon fluide non seulement avec React/Vue/Alpine, mais aussi dans des applications traditionnelles à rendu serveur comme Rails/ASP.NET/PHP
      Dans une application SSR typique comme https://www.jitbit.com/, on peut créer côté serveur un objet JSON de graphique à partir de requêtes LINQ et le passer à ECharts ; et si on lui passe un objet réactif d’une SPA basée sur Vue, cela fonctionne tout aussi bien
      Même lorsqu’il faut une astuce, par exemple afficher un pourcentage en gras dans l’infobulle d’un camembert, il est rarement nécessaire de fouiller dans le code source, et la plupart des solutions existent déjà et se trouvent facilement via une recherche ou un LLM
    • Je crois l’avoir regardé il y a quelques années, mais j’ai finalement choisi Chart.js, et jusqu’ici il y a eu très peu de choses impossibles à faire, même pour des personnalisations ponctuelles bizarres
      Pour l’analyse business, nous auto-hébergeons un serveur Metabase
      J’aimerais que Metabase propose davantage d’options de visualisation, mais les modèles et la configuration des requêtes sont tellement simples que les demandes justifiant vraiment de créer des graphiques personnalisés sont rares
    • Récemment, j’avais besoin d’un graphique en courbe avec dégradé où chaque palier de l’axe Y représentait une couleur et devait se fondre avec les couleurs voisines ; après en avoir essayé plusieurs, seul ECharts avait du sens
      Au départ, j’hésitais à cause du manque d’intégration React évidente, mais comme avec d’autres bibliothèques JavaScript, il s’est finalement révélé facile à utiliser, et meilleur que prévu
    • J’ai du mal à être d’accord avec cette appréciation, et https://plotly.com/javascript/ est aussi très bon
      Je garde aussi un œil sur https://observablehq.com/plot/, qui semble vraiment évoluer dans une excellente direction
    • L’approche d’implémentation semble très similaire ; je me demande en quoi il est meilleur que Chart.js

  • go-echarts https://github.com/go-echarts/go-echarts mérite aussi d’être recommandé
    On déclare les graphiques avec des types Go, puis le marshaller JSON de Go les lie automatiquement au JSON ; je l’ai utilisé dans plusieurs projets, et le mainteneur répondait rapidement lorsque des issues ou des PR étaient ouverts
    La manière d’embarquer des fonctions JavaScript et des requêtes SQL dans Go est amusante, avec un mélange assez singulier de données, de SQL, de Go et de JavaScript
    Voici un exemple en Go qui récupère des données depuis DuckDB et génère un fichier de graphique en chandeliers avec des infobulles JavaScript : https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • J’utilise beaucoup Go et DuckDB, mais jusqu’ici, pour les graphiques, je me contentais d’une combinaison un peu rudimentaire de JavaScript/html/template
      Celui-ci a l’air intéressant à expérimenter

  • À mon avis, ECharts est le meilleur qui existe actuellement
    Étrangement, il apparaît rarement dans les listes de bibliothèques de graphiques ou dans les résultats de recherche, mais après avoir utilisé chart.js, Google Charts, amCharts, Highcharts et ApexCharts, nous l’utilisons dans notre outil/bibliothèque https://docs.chartsql.com/

    • C’est sans doute parce que c’est un projet chinois
      Ant Design Components est aussi vraiment excellent, mais pas aussi connu qu’il devrait l’être
    • Je me demande ce que donnerait D3.js
      Je sais que D3.js est de bas niveau, mais avec l’IA cela devient assez facile
    • J’aime VisX pour le niveau de contrôle élevé qu’il offre
    • J’aime Plotly

  • Après avoir testé plusieurs bibliothèques, notre équipe a adopté Apache ECharts l’an dernier, et nous ne le regrettons pas
    La documentation est excellente, les performances sont bonnes, il est très configurable tout en restant facile à utiliser, et il prend en charge tous les types de graphiques dont nous avons besoin : barres, barres empilées, cartes, séries temporelles zoomables/défilables, nuages de points, etc.

    • Je me demande comment il se compare aux graphiques d’ag-grid

  • La line race a vraiment l’air superbe
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    Activez l’interrupteur et la course démarre
    À noter : la Norvège s’en est bien sortie

    • C’est propre visuellement, mais contrairement à l’exemple de Hans Rosling mentionné par quelqu’un d’autre, cette animation n’apporte aucune information supplémentaire
      Afficher simplement la dernière image transmettrait le même message beaucoup plus vite et de façon plus accessible ; c’est une forme de chart junk
      https://en.wikipedia.org/wiki/Chartjunk
    • Il faut probablement créditer Hans Rosling : https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
    • Il y a quelque chose qui cloche
      Les données semblent être life-expectancy-table.json, mais le titre fait référence au revenu
      Je ne sais pas où l’erreur s’est produite
    • Je me demande dans quelle mesure le fait que « la Norvège s’en est bien sortie » est corrélé au prix du pétrole

  • Si vous cherchez une bibliothèque de graphiques pour client web, je recommande aussi charts.css
    Honnêtement, ça ressemble à un sauveur : le concept est beaucoup plus simple que celui de la plupart des bibliothèques de graphiques, tout en permettant de produire la même chose
    Ça s’intègre très facilement au rendu côté serveur à l’ancienne, à htmx, etc.
    https://chartscss.org/

    • Dans le même esprit, j’aime depuis longtemps https://pancake-charts.surge.sh/, enrichi avec JavaScript
      Il a été développé par l’équipe graphique du NYT et utilisé pour les graphiques sur le Covid
    • Chart.css est plutôt l’une des nombreuses bibliothèques capables de tracer des graphiques linéaires, et c’est un monde complètement différent de ECharts
    • Quand vous dites « produire la même chose », je me demande si vous avez regardé les démos de ECharts ou celles, payantes, de amCharts https://www.amcharts.com/demos
      Je n’ai rien contre charts.css en soi, mais c’est un peu comme comparer un jouet en plastique pour enfants à une vraie navette spatiale
      Je passe la majeure partie de mon temps de travail à développer de lourdes applications d’analyse métier comme Apache Superset, et il serait impossible de les implémenter avec quelque chose comme chart.css
    • Comme d’autres réponses, je suis d’accord pour dire que ECharts offre beaucoup plus de fonctionnalités, mais l’approche consistant à transformer un tableau de données sémantique en graphique paraît assez intéressante
      J’utilise ECharts avec satisfaction, mais dans les cas où chaque ligne d’un tableau de données doit avoir une sparkline, il faut créer beaucoup trop d’instances ECharts
      Pour cet usage, cette bibliothèque semble bien adaptée
    • Les exemples d’animation de chartscss sont agaçants et ne paraissent pas non plus très convaincants fonctionnellement

  • Il vaudrait mieux conserver Apache dans le nom
    « ECharts, package de graphiques JS » donne l’impression que la maintenance sera abandonnée d’ici un an, tandis que « Apache ECharts, package de graphiques JS » donne l’impression qu’il sera encore maintenu l’an prochain

    • Curieusement, je ressens exactement l’inverse
      Quand je vois Apache accolé à un projet, j’ai tendance à supposer que le développement est arrêté et qu’il s’agit d’un projet legacy, ou seulement maintenu
      Il y a même cette phrase : « Apache est l’endroit où les projets vont mourir »

  • Ça fait plaisir de voir ECharts recevoir la reconnaissance qu’il mérite
    Il n’est pas exagéré de dire que c’est la meilleure bibliothèque open source de visualisation actuelle
    Elle utilise Canvas par défaut, ce qui la rend plus rapide que toutes les bibliothèques que j’ai essayées, et elle est assez flexible pour permettre d’ajouter soi-même des widgets, comme des infobulles personnalisées, par-dessus les graphes
    Elle fournit aussi beaucoup de métadonnées, comme la position de certains points dans le graphique rendu, ce qui est pratique à exploiter dans le code ; elle s’intègre très bien dans des webapps legacy, et le site propose aussi une option pour obtenir des builds personnalisés
    Elle gère également très bien les données en streaming, avec des animations très fluides entre les changements de données
    Je l’utilise depuis près de 7 ans dans plusieurs projets en production et personnels, elle reste mon premier choix, et la documentation s’est beaucoup améliorée entre-temps
    Certains vieux bugs sont agaçants, comme la gestion de 0 sur une échelle logarithmique, mais il existe des contournements, et j’ai rarement vu des bugs bloquants dans les cas d’usage courants

    • Je ne sais pas pourquoi on la voit si rarement dans les comparatifs de bibliothèques de graphiques
      Elle n’est même pas sur la page Wikipédia des bibliothèques de graphiques JavaScript, et je l’ai découverte par hasard via Apache Superset

  • Dans une démo web rapide, cette bibliothèque était la seule dont le composant GraphGL permettait de visualiser et manipuler de très grands graphes de manière interactive
    Elle ne semble pas faire partie des bibliothèques de visualisation les plus connues, mais elle est assez intéressante

  • J’étais justement en train d’examiner des bibliothèques de graphiques pour React/React Native, et Apache ECharts semble être un bon candidat pour la visualisation de données multiplateforme
    react-echarts(https://github.com/hugocxl/react-echarts) et react-native-echarts(https://github.com/wuba/react-native-echarts), que j’ai consultés, semblent tous deux activement développés, et le fait d’être sous l’égide d’Apache est aussi un gros avantage pour les perspectives de développement et la maintenance à venir