Lanzamiento de Apache ECharts 5.6

 (echarts.apache.org)
11 puntos por GN⁺ 2025-04-09 | 2 comentarios | Compartir por WhatsApp
  • Apache ECharts es una biblioteca de visualización JavaScript de código abierto para implementar visualizaciones rápidamente en la web
  • Permite combinar más de 20 tipos de gráficos y varios componentes, lo que ofrece flexibilidad para crear dashboards y pantallas de análisis
  • Mediante el cambio entre Canvas y SVG, renderizado progresivo y carga por streaming, admite el renderizado en tiempo real de 10 millones de datos
  • Puede usarse en flujos de análisis multidimensional gracias a la gestión basada en datasets y a transformaciones de datos como filtrado, clustering y regresión
  • Ofrece descripciones de gráficos generadas automáticamente y patrones de calcomanía, para que los usuarios que necesitan accesibilidad puedan entender más fácilmente el contenido y el contexto de los gráficos

Descripción general de Apache ECharts

  • Apache ECharts es una biblioteca de visualización JavaScript de código abierto
  • El sitio oficial se puede consultar en https://echarts.apache.org
  • En la página principal se informa la publicación de Apache ECharts 6.1 y se indica consultar el changelog
  • Los materiales para empezar y los ejemplos están disponibles en Get Started y Demo

Funcionalidades

  • Gráficos y componentes

    • Los tipos de gráficos incluidos por defecto son más de 20
    • También incluye alrededor de 12 componentes, y cada elemento se puede combinar libremente

  • Renderizado y datos a gran escala

    • Se puede cambiar fácilmente entre renderizado Canvas y SVG
    • Con renderizado progresivo y carga por streaming, puede renderizar 10 millones de datos en tiempo real

  • Análisis de datos

    • Gestiona los datos mediante datasets
    • Admite transformaciones de datos como filtrado, clustering y regresión, lo que permite analizar los mismos datos de forma multidimensional

  • Diseño visual

    • El diseño predeterminado sigue principios de visualización
    • Admite diseño responsivo y se puede personalizar mediante una configuración flexible

  • Comunidad y extensiones

    • Una comunidad activa de código abierto mantiene el desarrollo del proyecto
    • También hay disponibles diversas extensiones de terceros

  • Accesibilidad

    • Ofrece descripciones de gráficos generadas automáticamente
    • Los patrones de calcomanía ayudan a los usuarios con discapacidades a entender el contenido y el contexto de los gráficos

Material de cita y canales de la comunidad

  • Los usuarios de ECharts pueden citar el artículo en actividades relacionadas, como proyectos de I+D, productos, artículos de investigación, informes técnicos, noticias, libros, presentaciones, educación y patentes
  • El artículo citado está disponible como PDF en Visual Informatics, 2018
  • Como canales de actualización se indican GitHub, WeChat, Weibo y la cuenta de X

Lecturas relacionadas

2 comentarios

 
jhk0530 2025-04-09

ECharts es bonito y está bastante bien. Personalmente, me resultó más fácil de usar que Highcharts.
 
GN⁺ 2025-04-09
Comentarios en Hacker News

  • Al crear Briefer(https://briefer.cloud), probé casi todas las bibliotecas de visualización y puedo decir con confianza que Apache ECharts es la mejor
    Las otras bibliotecas por lo general eran feas, difíciles de usar porque había que manejarlas de forma imperativa, o les faltaba flexibilidad
    ECharts tiene un diseño predeterminado atractivo, permite calcular en el backend una especificación declarativa del gráfico y luego enviar al frontend solo la especificación a renderizar, y es lo bastante flexible como para soportar casi todo lo que hacen las herramientas tradicionales de BI
    Nunca tuve que extender la biblioteca para agregar una función nueva; todo lo que necesitaba ya venía incluido

    • Además, ECharts fue casi la única dependencia del proyecto que se podía actualizar sin miedo a que algo se rompiera
      Incluso al actualizar de 3.x a 5.x, siguió funcionando solo con npm update, y da una confianza poco común hoy en día
      Se adapta bien tanto a SSR como a SPA, y como en su mayoría es JavaScript puro, funciona de forma fluida no solo con React/Vue/Alpine sino también en aplicaciones tradicionales renderizadas en servidor como Rails/ASP.NET/PHP
      En una app SSR típica como https://www.jitbit.com/, puedes crear un objeto JSON del gráfico con una consulta LINQ del servidor y pasárselo a ECharts, y también funciona igual de bien si le pasas un objeto reactivo de una SPA basada en Vue
      Incluso si necesitas un truco como mostrar porcentajes en negritas en el tooltip de un gráfico circular, casi nunca hace falta meterse al código fuente, y por lo general ya existe una solución que se encuentra fácilmente con una búsqueda o con un LLM
    • Me parece haberlo visto hace algunos años, pero al final elegí Chart.js, y hasta ahora casi no he encontrado nada que no pudiera hacer, incluso con personalizaciones raras de una sola vez
      Para analítica de negocio alojo yo mismo un servidor de Metabase
      Me gustaría que Metabase tuviera más opciones de visualización, pero configurar modelos y consultas es tan fácil que no llegan tan seguido solicitudes que justifiquen hacer gráficos personalizados
    • Hace poco necesité un gráfico de líneas con degradado donde cada nivel del eje Y representara un color y se mezclara con los colores vecinos, y después de probar varias opciones, solo ECharts tenía sentido
      Al principio dudé por la falta de una integración clara con React, pero al final fue fácil de usar como cualquier otra biblioteca de JavaScript, y resultó mejor de lo esperado
    • Me cuesta estar de acuerdo con esa evaluación; https://plotly.com/javascript/ también es muy bueno
      También sigo de cerca https://observablehq.com/plot/, y parece que va en una dirección realmente excelente
    • La implementación se ve muy parecida, así que me da curiosidad saber en qué es mejor que Chart.js

  • go-echarts https://github.com/go-echarts/go-echarts también vale la pena recomendarlo
    Si declaras un gráfico con tipos de Go, el serializador JSON de Go lo enlaza automáticamente al JSON; lo he usado en varios proyectos y, cuando se abría un issue o un PR, el mantenedor respondía rápido
    Es interesante la forma en que incrusta funciones de JavaScript y consultas SQL en Go, y mezcla de manera curiosa datos, SQL, Go y JavaScript
    Aquí hay un ejemplo en Go que toma datos de DuckDB y genera un archivo de gráfico de velas con tooltips en JavaScript: https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • Uso mucho Go y DuckDB, y hasta ahora para gráficos he venido usando una combinación algo tosca de JavaScript y html/template
      Esto se ve divertido para experimentar

  • Creo que ECharts es el mejor que existe hoy
    Curiosamente no suele aparecer mucho en listas o resultados de búsqueda sobre bibliotecas de gráficos, pero después de usar chart.js, Google Charts, amCharts, Highcharts y ApexCharts, lo estamos usando en nuestra herramienta/biblioteca https://docs.chartsql.com/

    • Supongo que es porque es un proyecto chino
      Ant Design Components también es realmente excelente, pero no es tan conocido como debería
    • Me pregunto qué tal estará D3.js
      Sé que D3.js es de bajo nivel, pero con IA se vuelve bastante fácil
    • Me gusta VisX por el nivel de control que ofrece
    • Me gusta Plotly

  • Después de probar varias bibliotecas, el año pasado en el equipo nos quedamos con Apache ECharts y no nos arrepentimos
    La documentación es excelente, el rendimiento es bueno, tiene muchas posibilidades de configuración sin dejar de ser fácil de usar, y soporta todos los tipos de gráficos que necesitamos: barras, barras apiladas, mapas, series temporales con zoom/scroll, diagramas de dispersión, etc.

    • Me da curiosidad cómo se compara con los gráficos de ag-grid

  • La carrera de líneas se ve realmente genial
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    Si activas el interruptor, empieza la carrera
    Además, Noruega lo hizo bien

    • Se ve limpio, pero a diferencia del ejemplo de Hans Rosling que mencionó otra persona, esta animación no aporta información adicional
      Mostrar solo el último fotograma transmitiría el mismo mensaje mucho más rápido y de forma más accesible; es una especie de chart junk
      https://en.wikipedia.org/wiki/Chartjunk
    • Creo que hay que darle crédito a Hans Rosling: https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
    • Hay algo que no cuadra
      Los datos parecen ser life-expectancy-table.json, pero el título apunta a Income
      No sé en qué parte ocurrió el error
    • Me pregunto qué tanta correlación tiene la parte de “a Noruega le fue bien” con el precio del petróleo

  • Si buscas una librería de gráficos para cliente web, también recomiendo charts.css
    Honestamente se siente como un salvavidas, y el concepto es mucho más simple que el de la mayoría de las librerías de gráficos, aunque permite hacer lo mismo
    Se integra muy fácilmente con renderizado del lado del servidor al estilo antiguo, htmx, etc.
    https://chartscss.org/

    • En una línea parecida, desde hace mucho me gusta https://pancake-charts.surge.sh/, mejorado con JavaScript
      Lo desarrolló el equipo de gráficos del NYT y se usó para gráficos sobre COVID
    • Chart.css es más bien una de las muchas librerías capaces de dibujar gráficos de líneas, y está en un mundo completamente distinto al de ECharts
    • Eso de “puede hacer lo mismo” me hace preguntarme si realmente vio demos de ECharts o incluso las demos de amCharts, que es de pago: https://www.amcharts.com/demos
      No le tengo rechazo a charts.css en sí, pero se siente como comparar un juguete de plástico para niños con un transbordador espacial de verdad
      Paso la mayor parte de mi jornada desarrollando apps pesadas de analítica de negocio como Apache Superset, y algo como chart.css simplemente no da para implementarlo
    • Como dicen otras respuestas, coincido en que ECharts ofrece muchas más funciones, pero la forma en que convierte tablas de datos con sentido en gráficos sí se ve bastante buena
      Uso ECharts con satisfacción, pero en lugares donde necesito una sparkline por cada fila de una tabla de datos, tendría que crear demasiadas instancias de ECharts
      Para ese tipo de uso, esta librería sí parece encajar bien
    • Los ejemplos de animación de chartscss son molestos y, funcionalmente, tampoco se ven muy buenos

  • Mejor dejarle Apache en el nombre
    Si dice “ECharts, paquete de gráficos JS”, suena a que en menos de un año se queda sin mantenimiento; si dice “Apache ECharts, paquete de gráficos JS”, suena a que seguirá vivo el próximo año

    • Curiosamente, me transmite justo lo contrario
      Cuando veo Apache en el nombre, asumo que el desarrollo se detuvo y que es un proyecto legacy o en puro mantenimiento
      Incluso existe el dicho de que “Apache es adonde van los proyectos a morir”

  • Da gusto ver que ECharts recibe el reconocimiento que merece
    No es exagerado decir que es la mejor librería de visualización open source que existe hoy
    Usa Canvas por defecto, así que es más rápida que cualquier otra librería que yo haya probado, y además es lo bastante flexible como para poner widgets encima del gráfico, como tooltips personalizados
    También expone bastante metadato, como la posición de puntos específicos dentro del gráfico renderizado, lo cual viene muy bien para usarlo desde código; además se integra muy bien en webapps legacy y hasta ofrece la opción de descargar builds personalizadas desde el sitio
    También maneja muy bien datos en streaming, así que las animaciones entre cambios de datos son muy fluidas
    La he usado por casi 7 años en varios proyectos de producción y personales, y sigue siendo mi primera opción; además, la documentación ha mejorado muchísimo en ese tiempo
    A veces molestan bugs viejos, como el manejo del 0 en escala logarítmica, pero hay formas de rodearlos, y casi nunca me he topado con bugs bloqueantes en casos de uso normales

    • No entiendo por qué aparece tan poco en comparativas de librerías de gráficos
      Ni siquiera está en la página de Wikipedia sobre librerías de gráficos para JavaScript, y la conocí por pura casualidad a través de Apache Superset

  • En demos web rápidas, esta fue la única librería con la que pude ver y manipular de forma interactiva grafos muy grandes usando el componente GraphGL
    No parece ser una librería de visualización muy conocida, pero es bastante interesante

  • Justo andaba revisando librerías de gráficos para React/React Native, y Apache ECharts se ve como una buena candidata para visualización de datos multiplataforma
    Tanto react-echarts(https://github.com/hugocxl/react-echarts) como react-native-echarts(https://github.com/wuba/react-native-echarts) parecen desarrollarse activamente, y el hecho de estar bajo Apache también es una gran ventaja de cara a su futuro desarrollo y mantenimiento