8 Bibliotecas de JavaScript para Gráficos – Parte 3: ECharts

/ Artigos, Blog, Computação

Olá! 👋

Seguimos com a nossa série sobre bibliotecas JavaScript para gráficos!

Se você está construindo dashboards corporativos ou precisa de visualizações de dados robustas, o ECharts é uma ótima escolha.

O que é o ECharts?

ECharts (Enterprise Charts) é uma biblioteca JavaScript de código aberto mantida pela Apache Foundation. Criada originalmente pelo Baidu, ela se tornou referência mundial para criação de gráficos interativos de alta qualidade, especialmente em ambientes empresariais.

Siga nossa página no Linkedin e no Instagram e ajude a divulgar nosso conteúdo🥰

Destaques

1. Grande variedade de gráficos

  • Gráficos básicos: linha, barra, pizza, área
  • Visualizações avançadas: mapas geográficos, gráficos 3D, sankey, treemap
  • Gráficos especializados: gauge, radar, candlestick para análise financeira
  • Combinações complexas em um único canvas

2. Ótima performance

O ECharts foi projetado para lidar com grandes volumes de dados sem comprometer a performance. Pode renderizar milhares de pontos de dados mantendo a fluidez das interações!

3. Interatividade Rica

  • Zoom e pan nativos
  • Brush selection (seleção por área)
  • Tooltip customizável
  • Animações suaves e profissionais
  • Sincronização entre múltiplos gráficos

Como Instalar

Via NPM

# NPM
npm install echarts

Via CDN

<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js">
</script>

Import no seu projeto

// Import completo
import * as echarts from 'echarts';

// Ou import otimizado (bundle menor)
import { BarChart } from 'echarts/charts';

echarts.use([LineChart, BarChart, GridComponent, TooltipComponent, CanvasRenderer]);

Exemplos Práticos

  • Exemplo de um gráfico simples de barra (dados fictícios):
 var option = {
  title: {
      text: 'Popularidade de Linguagens de Programação',
      left: 'center'
  },
  tooltip: {},
  xAxis: {
      type: 'category',
      data: ['JavaScript', 'Python', 'Java', 'C#', 'PHP', 'C++', 'TypeScript']
  },
  yAxis: {
      type: 'value'
  },
  series: [{
      data: [95, 90, 80, 70, 60, 50, 65],
      type: 'bar',
      itemStyle: {
          color: '#5470C6',
          borderRadius: [5, 5, 0, 0]
      }
  }]
};

myChart.setOption(option);

Resultado:

  • Exemplo de gráficos de pizza sobre mapa mundial (dados fictícios):
myChart.showLoading();

$.get('https://echarts.apache.org/examples/data/asset/geo/world.json', function (worldJson) {
    echarts.registerMap('world', worldJson);

    function randomPieSeries(center, radius) {
        const data = ['A', 'B', 'C', 'D'].map((t) => {
            return {
                value: Math.round(Math.random() * 100),
                name: 'Categoria ' + t
            };
        });
        return {
            type: 'pie',
            coordinateSystem: 'geo',
            tooltip: {
                formatter: '{b}: {c} ({d}%)'
            },
            label: { show: false },
            labelLine: { show: false },
            animationDuration: 0,
            radius,
            center,
            data
        };
    }

    var option = {
        geo: {
            map: 'world',
            roam: true,
            itemStyle: {
                areaColor: '#e0f3ff',
                borderColor: '#999'
            }
        },
        tooltip: {},
        series: [
            randomPieSeries([-58, -34], 15),   // Buenos Aires, Argentina
            randomPieSeries([116.4074, 39.9042], 15), // Pequim, China
            randomPieSeries([-74.006, 40.7128], 15),  // Nova York, EUA
            randomPieSeries([2.3522, 48.8566], 15),   // Paris, França
            randomPieSeries([151.2093, -33.8688], 15) // Sydney, Austrália
        ]
    };

    myChart.hideLoading();
    myChart.setOption(option);
});

Resultado:

Quando Usar o ECharts?

✅ Ideal para:

  • Dashboards empresariais complexos
  • Relatórios executivos com múltiplas visualizações
  • Aplicações que precisam de mapas geográficos
  • Sistemas que lidam com grande volume de dados
  • Quando você precisa de gráficos 3D profissionais

⚠️ Considere alternativas se:

  • Você precisa apenas de gráficos simples
  • O tamanho do bundle é uma preocupação crítica
  • Seu projeto tem restrições rígidas de performance

Vantagens do ECharts

  • Documentação excelente com exemplos práticos
  • Comunidade ativa e suporte enterprise
  • Temas prontos para diferentes estilos visuais
  • Exportação para PNG, SVG, PDF nativa
  • Responsive por padrão
  • Gratuito e open source

Desvantagens

  • Bundle relativamente grande (especialmente com todos os recursos)
  • Curva de aprendizado para recursos avançados
  • Menos flexibilidade de customização comparado a D3.js

Conclusão

O ECharts é a escolha perfeita quando você precisa criar dashboards profissionais que impressionem stakeholders e usuários finais.

Sua combinação de performance, variedade de gráficos e recursos empresariais o torna uma ferramenta indispensável para projetos sérios de visualização de dados.

Na próxima edição, vamos explorar D3.js, outra biblioteca poderosa desta série.

Até lá, que tal experimentar o ECharts em seu próximo projeto?

Curtiu este conteúdo? Compartilhe com amigos e colegas.

Posts relacionados