Criando Gráficos de Barras Interativos com ECharts

Introdução

Neste projeto, você aprenderá como criar um gráfico de barras usando a biblioteca JavaScript ECharts para exibir estatísticas de desempenho dos alunos. ECharts é uma ferramenta poderosa de visualização de dados que pode ajudá-lo a criar gráficos interativos e visualmente atraentes para apresentar seus dados.

👀 Visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como corrigir um erro no código inicial para exibir o gráfico corretamente
• Como modificar as configurações do eixo x e do eixo y para garantir que o gráfico seja exibido na direção correta
• Como ajustar os dados na série para corresponder à ordem dos rótulos do eixo x

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Inicializar uma instância ECharts e configurar as opções do gráfico
• Definir as propriedades do eixo x e do eixo y para controlar a aparência do gráfico
• Atualizar os dados na série para corresponder à visualização desejada

Configurar a Estrutura do Projeto

Nesta etapa, você configurará a estrutura do projeto e preparará os arquivos e pastas necessários.

Abra a pasta do projeto no seu editor de código. A estrutura do diretório é a seguinte:

├── echarts.js
└── index.html

Onde:

• index.html é a página principal.
• js/echarts.js é o arquivo ECharts.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra o "Web 8080" no topo da VM, atualize manualmente a página e você verá que a página está em branco. Neste momento, abra o console e você verá a seguinte mensagem de erro:

Corrigir o Erro

Nesta etapa, você aprenderá como corrigir o erro no projeto para que o gráfico possa ser exibido.

1. Abra o arquivo index.html no projeto fornecido.
2. O código na tag script foi encontrado com um eixo x não definido. No gráfico ECharts, tanto o eixo x quanto o eixo y devem ser definidos, independentemente de haver dados. Portanto, fizemos a seguinte alteração no código sob var option = {...}; dentro de TODO, conforme segue:

// TODO
// xAxis
xAxis: {
  data: ["Tom", "Tony", "Lucas", "Lucy", "Anna", "Kevin"]
},
// yAxis
yAxis: {},
series: [
  {
    name: "grades",
    type: "bar",
    data: [55, 90, 65, 70, 80, 63]
  }
]

Isso corrigirá o erro e permitirá que o gráfico seja exibido.

4. Salve as alterações e recarregue a página para ver o gráfico.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.