Lançamento do Apache ECharts 5.6

 (echarts.apache.org)
11 pontos por GN⁺ 2025-04-09 | 2 comentários | Compartilhar no WhatsApp
  • Apache ECharts é uma biblioteca de visualização JavaScript de código aberto para implementar visualizações rapidamente na web
  • Oferece mais de 20 tipos de gráficos e vários componentes que podem ser combinados, trazendo flexibilidade para montar dashboards e telas de análise
  • Suporta renderização em tempo real de 10 milhões de pontos de dados por meio de alternância entre Canvas e SVG, renderização progressiva e carregamento em fluxo
  • Permite uso em fluxos de análise multidimensional com gerenciamento baseado em dataset e transformações de dados como filtragem, clustering e regressão
  • Fornece descrições de gráficos geradas automaticamente e padrões decal para facilitar que usuários com necessidades de acessibilidade entendam o conteúdo e o contexto dos gráficos

Visão geral do Apache ECharts

  • Apache ECharts é uma biblioteca de visualização JavaScript de código aberto
  • O site oficial pode ser acessado em https://echarts.apache.org
  • Na página inicial há um aviso sobre a publicação do Apache ECharts 6.1 junto com o changelog
  • Materiais introdutórios e exemplos estão disponíveis em Get Started e Demo

Estrutura de recursos

  • Gráficos e componentes

    • Há mais de 20 tipos de gráficos incluídos por padrão
    • Também são fornecidos cerca de 12 componentes, e cada elemento pode ser combinado livremente

  • Renderização e grandes volumes de dados

    • É possível alternar facilmente entre renderização em Canvas e SVG
    • Com renderização progressiva e carregamento em fluxo, é possível renderizar em tempo real 10 milhões de pontos de dados

  • Análise de dados

    • Os dados são gerenciados com datasets
    • Suporta transformações de dados como filtragem, clustering e regressão, permitindo analisar os mesmos dados de forma multidimensional

  • Design visual

    • O design padrão segue princípios de visualização
    • Suporta design responsivo e pode ser personalizado com configurações flexíveis

  • Comunidade e expansão

    • Uma comunidade ativa de código aberto dá continuidade ao desenvolvimento do projeto
    • Também há várias extensões de terceiros disponíveis

  • Acessibilidade

    • Fornece descrições de gráficos geradas automaticamente
    • Os padrões decal ajudam usuários com deficiência a compreender o conteúdo e o contexto dos gráficos

Materiais de citação e canais da comunidade

  • Usuários do ECharts podem citar o artigo em atividades relacionadas, como projetos de P&D, produtos, artigos acadêmicos, relatórios técnicos, notícias, livros, apresentações, educação e patentes
  • O artigo para citação está disponível em Visual Informatics, 2018 PDF
  • Como canais de atualização, são indicados GitHub, WeChat, Weibo e a conta no X

Leituras relacionadas

2 comentários

 
jhk0530 2025-04-09

O ECharts é bonito e muito bom. Pessoalmente, achei mais fácil de usar do que o Highcharts.
 
GN⁺ 2025-04-09
Opiniões no Hacker News

  • Ao criar o Briefer (https://briefer.cloud), testei praticamente todas as bibliotecas de visualização e posso dizer com confiança que Apache ECharts é a melhor
    As outras bibliotecas, em geral, eram feias, difíceis de usar por exigirem uma abordagem imperativa, ou pouco flexíveis
    O ECharts tem um design padrão bonito, permite calcular no backend uma especificação declarativa do gráfico e enviar ao frontend apenas a especificação a ser renderizada, e é flexível o bastante para dar suporte a quase tudo que ferramentas tradicionais de BI fazem
    Nunca precisei estender a biblioteca para um recurso novo; tudo de que precisei já estava lá

    • Além disso, o ECharts foi uma das pouquíssimas dependências do projeto que eu não me preocupava em quebrar ao atualizar
      Mesmo ao fazer upgrade da 3.x para a 5.x, bastou npm update e tudo continuou funcionando bem; passa uma confiança rara hoje em dia
      Ele se encaixa bem tanto em SSR quanto em SPA e, por ser em grande parte JavaScript puro, funciona sem atritos não só com React/Vue/Alpine, mas também em apps tradicionais com renderização no servidor, como Rails/ASP.NET/PHP
      Em um app SSR típico como https://www.jitbit.com/, dá para criar o objeto JSON do gráfico com consultas LINQ no servidor e passá-lo ao ECharts; se passar um objeto reativo de uma SPA em Vue, também funciona sem problemas
      Mesmo quando é preciso algum contorno, como mostrar uma porcentagem em negrito no tooltip de um gráfico de pizza, quase nunca é necessário mergulhar no código-fonte; na maioria das vezes já existe uma solução, fácil de encontrar por busca ou com um LLM
    • Acho que cheguei a olhar para ele alguns anos atrás, mas acabei escolhendo Chart.js, e até hoje quase não houve nada que ele não conseguisse fazer, mesmo em customizações pontuais estranhas
      Para análise de negócios, hospedo meu próprio servidor Metabase
      Gostaria que o Metabase tivesse mais opções de visualização, mas como a configuração de modelos e consultas é tão fácil, raramente chegam pedidos que justifiquem criar gráficos customizados
    • Recentemente precisei de um gráfico de linhas com gradiente em que cada etapa do eixo Y representasse uma cor e tivesse de se misturar com as cores vizinhas; depois de testar algumas opções, só o ECharts fez sentido
      No começo fiquei receoso pela falta de uma integração clara com React, mas, como em outras bibliotecas JavaScript, no fim foi fácil de usar e melhor do que eu esperava
    • É difícil concordar com essa avaliação, e https://plotly.com/javascript/ também é muito bom
      Também tenho acompanhado https://observablehq.com/plot/, e parece estar indo numa direção realmente excelente
    • A forma de implementação parece muito parecida; fico curioso para saber em que ele é melhor que o Chart.js

  • go-echarts https://github.com/go-echarts/go-echarts também é uma boa recomendação
    Você declara os gráficos com tipos Go, e o marshaller JSON do Go faz automaticamente o binding para JSON; usei em vários projetos e, quando surgiam issues ou PRs, o mantenedor respondia rapidamente
    É interessante a forma como funções JavaScript e consultas SQL são embutidas em Go, criando uma mistura curiosa de dados, SQL, Go e JavaScript
    Há aqui um exemplo em Go que busca dados no DuckDB e gera um arquivo de gráfico candlestick com tooltip em JavaScript: https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • Uso bastante Go e DuckDB, mas até agora vinha usando uma combinação meio tosca de JavaScript/html/template para gráficos
      Isso parece bom para brincar

  • Acho que o ECharts é o melhor que existe hoje
    Estranhamente, ele não aparece muito em listas de bibliotecas de gráficos nem nos resultados de busca, mas depois de usar chart.js, Google Charts, amCharts, Highcharts e ApexCharts, estamos usando-o em nossa ferramenta/biblioteca https://docs.chartsql.com/

    • Deve ser por ser um projeto chinês
      Ant Design Components também é realmente excelente, mas não é tão conhecido quanto deveria
    • Fico curioso sobre como seria com D3.js
      Sei que D3.js é de baixo nível, mas com IA fica bem mais fácil
    • Gosto do VisX pelo alto nível de controle
    • Gosto do Plotly

  • Depois de testar várias bibliotecas, no ano passado nossa equipe ficou com Apache ECharts e não nos arrependemos
    A documentação é excelente, o desempenho é bom, ele é altamente configurável e ainda assim fácil de usar, e dá suporte a todos os tipos de gráfico de que precisamos: barras, barras empilhadas, mapas, séries temporais com zoom/rolagem, dispersão etc.

    • Fico curioso para saber como ele se compara aos gráficos do ag-grid

  • O line race parece muito legal
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    Ao ativar o botão, a corrida começa
    A propósito, a Noruega foi bem

    • Visualmente é limpo, mas, ao contrário do exemplo de Hans Rosling mencionado por outra pessoa, essa animação não acrescenta informação
      Mostrar apenas o último frame transmitiria a mesma mensagem de forma muito mais rápida e acessível, e é uma espécie de chartjunk
      https://en.wikipedia.org/wiki/Chartjunk
    • Acho que é preciso dar crédito a Hans Rosling: https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
    • Tem algo fora do lugar
      Os dados parecem ser life-expectancy-table.json, mas o título aponta para Income
      Não sei onde aconteceu o erro
    • Fico curioso para saber quanta correlação há entre a parte “a Noruega foi bem” e o preço do petróleo

  • Se você está procurando uma biblioteca de gráficos para cliente web, também recomendo charts.css
    Sinceramente, parece um salvador; o conceito é muito mais simples do que o da maioria das bibliotecas de gráficos e, ainda assim, dá para criar as mesmas coisas
    Ela se integra com muita facilidade a renderização server-side no estilo antigo, htmx etc.
    https://chartscss.org/

    • Na mesma linha, há muito tempo gosto do https://pancake-charts.surge.sh/, incrementado com JavaScript
      Foi desenvolvido pela equipe de gráficos do NYT e usado em gráficos sobre a Covid
    • Chart.css é mais uma entre inúmeras bibliotecas capazes de desenhar gráficos de linha, e é um mundo completamente diferente de ECharts
    • Quando dizem que “dá para criar as mesmas coisas”, fico me perguntando se viram as demos do ECharts ou as demos pagas do amCharts https://www.amcharts.com/demos
      Não tenho nada contra o charts.css em si, mas parece comparar um brinquedo de plástico infantil com um ônibus espacial de verdade
      Passo a maior parte do meu tempo de trabalho desenvolvendo aplicativos pesados de análise de negócios, como o Apache Superset, e é impossível implementar isso com algo como chart.css
    • Concordo com as outras respostas que o ECharts oferece muito mais recursos, mas a forma de transformar uma tabela de dados significativa em um gráfico parece bastante boa
      Uso o ECharts com satisfação, mas, em lugares onde cada linha de uma tabela de dados precisa de um sparkline, é preciso criar instâncias demais do ECharts
      Para esse tipo de uso, esta biblioteca parece se encaixar bem
    • Os exemplos de animação do chartscss são irritantes e, funcionalmente, também não parecem muito bons

  • Acho melhor manter Apache no nome
    Se disserem “ECharts, pacote de gráficos JS”, parece que a manutenção vai parar em até um ano; se disserem “Apache ECharts, pacote de gráficos JS”, parece que ele ainda será mantido no ano que vem

    • Curiosamente, sinto exatamente o oposto
      Quando vejo Apache no nome, passo a presumir que o desenvolvimento parou e que é um projeto legado ou apenas em manutenção
      Há até a frase “Apache é o lugar para onde projetos vão morrer”

  • Fico feliz que o ECharts esteja recebendo o reconhecimento que merece
    Não é exagero dizer que é a melhor biblioteca de visualização open source existente hoje
    Por padrão, usa Canvas, é mais rápida do que qualquer biblioteca que já usei e é flexível o bastante para permitir colocar diretamente widgets como tooltips customizados sobre os gráficos
    Também fornece muitos metadados, como a posição de pontos específicos dentro do gráfico renderizado, o que é ótimo para usar no código; é muito boa para integrar a webapps legados; e o site ainda oferece a opção de baixar builds customizados
    O processamento de dados em streaming também é excelente, com animações muito suaves entre mudanças nos dados
    Venho usando há quase 7 anos em vários projetos de produção e pessoais, e ela continua sendo minha primeira opção; a documentação também melhorou muito nesse período
    Bugs antigos, como problemas ao lidar com 0 em escala logarítmica, às vezes irritam, mas há formas de contornar, e quase nunca vi bugs que bloqueassem casos de uso comuns

    • Não sei por que aparece tão raramente em comparações de bibliotecas de gráficos
      Ela nem está na página da Wikipédia sobre bibliotecas de gráficos JavaScript, e eu a descobri por acaso via Apache Superset

  • Em uma demo web rápida, só esta biblioteca permitiu visualizar e manipular interativamente grafos muito grandes com o componente GraphGL
    Não parece ser uma biblioteca de visualização muito conhecida, mas é bem interessante

  • Eu estava justamente dando uma olhada em bibliotecas de gráficos para React/React Native, e Apache ECharts parece uma boa candidata para visualização de dados multiplataforma
    Tanto o react-echarts(https://github.com/hugocxl/react-echarts) quanto o react-native-echarts(https://github.com/wuba/react-native-echarts) que encontrei parecem estar em desenvolvimento ativo, e o fato de estar sob a Apache também é uma grande vantagem em termos de perspectivas de desenvolvimento futuro e manutenção