11 pontos por GN⁺ 2025-04-09 | 2 comentários | Compartilhar no WhatsApp
  • ECharts é uma biblioteca open source de visualização em JavaScript, otimizada tanto para PC quanto para dispositivos móveis
  • Compatível com a maioria dos navegadores modernos, incluindo Internet Explorer 9/10/11, Chrome, Firefox e Safari
  • Usa o ZRender, seu próprio mecanismo de renderização gráfica, para fornecer gráficos intuitivos, interativos e de alta qualidade

Oferece vários tipos de gráficos

  • Oferece gráfico de linha, gráfico de barras, gráfico de dispersão, gráfico de pizza, gráfico de candlestick, boxplot, mapas, heatmap, gráfico de linha para informações direcionais, grafo de relações, treemap, sunburst, coordenadas paralelas, gráfico de funil, gráfico gauge e mais
  • É possível criar gráficos compostos combinando vários tipos de visualização
  • Com suporte a séries de gráficos personalizadas, basta passar a função de callback renderItem para implementar livremente os elementos gráficos desejados
  • Recursos de interação já vêm embutidos e podem ser usados imediatamente sem configuração adicional

Funcionalidade de download seletivo de componentes e redução de tamanho

  • O pacote padrão já é altamente otimizado, mas é possível gerar um pacote mais leve selecionando apenas os tipos de gráfico e componentes necessários
  • É possível baixar um bundle personalizado contendo apenas os recursos necessários por meio do builder online

Suporte a vários formatos de dados

  • Desde a v4.0, a propriedade dataset oferece suporte a várias estruturas de dados, como arrays bidimensionais e objetos key-value
  • A propriedade encode permite mapear a estrutura dos dados de forma intuitiva
  • Economiza tempo na escrita de algoritmos de transformação de dados e minimiza o uso de memória
  • Um único dataset pode ser compartilhado entre vários componentes
  • Suporte a TypedArray para economizar memória e melhorar o desempenho

Otimização para visualização de grandes volumes de dados

  • Oferece tecnologia de renderização incremental para visualizar milhões de pontos de dados
  • Recursos interativos como zoom e deslocamento também funcionam de forma fluida com grandes volumes de dados
  • Suporte à renderização de dados em streaming com WebSocket
  • É possível visualizar sem carregar todos os dados de uma vez

Otimizado para mobile

  • Otimizado para funções de zoom e deslocamento em ambientes móveis
  • No PC, é possível fazer a mesma operação com a roda do mouse
  • Disponibiliza um pacote compacto para mobile
  • Ao selecionar o mecanismo de renderização SVG, o uso de memória pode ser reduzido ainda mais

Vários modos de renderização e compatibilidade com plataformas

  • Suporte a vários modos de renderização, como Canvas, SVG (v4.0 ou superior) e VML
  • O VML é compatível com navegadores IE antigos, o SVG é mais eficiente em memória no mobile e o Canvas é forte no processamento de grandes volumes
  • Em ambiente Node.js, é possível fazer renderização no lado do servidor (SSR) via node-canvas
  • Também pode ser usado no WeChat MiniProgram
  • A comunidade também desenvolveu extensões para linguagens como Python (pyecharts), R (echarty) e Julia (ECharts.jl)
  • Com suporte a várias plataformas e linguagens, os desenvolvedores podem se concentrar apenas na visualização em si

Recursos de exploração de dados baseados em interação

  • É possível explorar dos dados gerais aos detalhes por meio de zoom, pan e filtragem
  • Oferece vários componentes interativos, como legend, visualMap, dataZoom, tooltip e brush
  • Permite explorar dados de várias formas na interface do usuário

Reforço dos recursos de visualização de dados multidimensionais

  • Desde o ECharts 3, houve reforço no suporte à visualização de dados multidimensionais
  • Além de visualizações multidimensionais tradicionais, como sistemas de coordenadas paralelas, os dados podem ser representados de várias maneiras
  • Com o componente visualMap, é possível mapear dados dimensionais para atributos visuais como cor, tamanho, transparência e sombreamento

Atualização de dados em tempo real

  • Quando o dataset é alterado, isso é refletido no gráfico em tempo real
  • As mudanças nos dados são detectadas automaticamente e exibidas no gráfico com animações
  • Também é possível representar dados ao longo do tempo com o componente timeline

Oferece efeitos visuais especiais

  • É possível aplicar efeitos visuais a todos os tipos de dados, como pontos, linhas e dados geográficos
  • Chama a atenção do usuário e melhora a capacidade de transmitir os dados

Visualização 3D baseada em WebGL

  • O ECharts GL é baseado em WebGL e oferece várias visualizações 3D, como globo terrestre, edifícios e histogramas populacionais
  • É possível adicionar efeitos visuais com uma configuração simples
  • Também pode ser usado em VR e em telas grandes

Suporte a acessibilidade

  • Em conformidade com o padrão de acessibilidade WAI-ARIA do W3C
  • Gera automaticamente descrições para pessoas com deficiência visual com base nas informações de configuração do gráfico
  • O conteúdo de visualização pode ser acessado por meio de leitores de tela

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 desenvolver o Briefer, testei praticamente todas as bibliotecas de visualização, e o Apache ECharts é a melhor

    • Os principais problemas das outras bibliotecas são: (a) o design não é muito bom, (b) são difíceis de usar, (c) falta flexibilidade
    • O Apache ECharts resolve esses problemas
    • Ele já é bonito por padrão, permite calcular uma especificação declarativa no backend e enviá-la ao frontend, e é flexível o bastante para suportar tudo o que ferramentas tradicionais de BI conseguem fazer
    • Não foi preciso adicionar recursos novos, porque tudo de que precisávamos já estava incluído
    • Fico feliz em ver esse excelente trabalho no HN
  • Também recomendo go-echarts

    • Você pode declarar gráficos com tipos de Golang, e o marshaler JSON do Golang faz o binding automaticamente para JSON
    • Usei em vários projetos, e o mantenedor responde rápido quando há issues ou PRs
    • É divertido embutir funções JavaScript e consultas SQL em Go
    • Há um exemplo em Golang que busca dados do DuckDB e gera um arquivo de gráfico candlestick com tooltips em JavaScript
  • Depois de tentar muitas outras bibliotecas, no ano passado decidi usar Apache ECharts e não me arrependo

    • Documentação excelente, desempenho, alto nível de configuração, facilidade de uso e suporte a todos os tipos de gráfico de que preciso
  • Acho que ECharts é a melhor biblioteca

    • Ela não aparece muito em listas ou buscas por bibliotecas de gráficos
    • Já testei chart.js, google charts, amCharts, Highcharts e ApexCharts
    • Estamos usando na nossa ferramenta/biblioteca
  • Uso Apache ECharts no produto desde 2020

    • Recomendo fortemente; excelente biblioteca, excelente documentação, sem problemas em 5 anos
    • Espero melhorias no ticket de acessibilidade por teclado
  • A corrida de linhas é muito legal

    • Dá para iniciar a corrida alternando o switch
    • Noruega mandou bem
  • Se você está procurando uma biblioteca de gráficos para clientes web, também recomendo charts.css

    • O conceito é muito mais simples do que o da maioria das bibliotecas de gráficos, e ainda assim consegue alcançar a mesma funcionalidade
    • É muito simples de usar com server-side rendering, htmx etc.
  • Quando vejo o anúncio de um pacote de gráficos JS chamado ECharts, penso que a manutenção vai ser interrompida em um ano

    • Quando vejo o anúncio de um pacote de gráficos JS chamado Apache ECharts, penso que ele ainda vai estar sendo mantido no ano que vem
  • Eu estava procurando uma biblioteca de gráficos para React/React Native, e o Apache ECharts é um excelente candidato para visualização de dados cross-platform

    • Tanto react-echarts quanto react-native-echarts estão em desenvolvimento ativo
    • Estar sob a Apache é uma grande vantagem para as perspectivas de desenvolvimento futuro e manutenção do projeto
  • Adicionei o ECharts como biblioteca de gráficos para IA e estou migrando os gráficos padrão da GUI para ECharts

    • Fiz uma análise extensa antes de escolher, e escolhi o ECharts porque ele é excelente e muito bonito