O Mar Ilimitado do Aprendizado

Introdução

Neste projeto, você aprenderá como criar um gráfico de visualização de dados usando a biblioteca ECharts. O projeto visa ajudar Lucy, uma usuária da plataforma de aprendizado online, a visualizar melhor seu tempo diário de estudo.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como obter dados de um arquivo JSON e processá-los para extrair as informações necessárias.
• Como usar a biblioteca ECharts para criar um gráfico de barras que exibe as estatísticas de duração de estudo semanal e mensal.
• Como implementar interatividade para permitir que o usuário alterne entre as visualizações semanal e mensal.
• Como redimensionar o gráfico dinamicamente quando a janela é redimensionada.

🏆 Conquistas

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

• Obter dados de um arquivo JSON e manipulá-los para visualização.
• Configurar e personalizar um gráfico de barras ECharts para exibir as estatísticas de duração do estudo.
• Adicionar interatividade ao gráfico e lidar com as interações do usuário.
• Garantir que o gráfico permaneça responsivo e se adapte ao redimensionamento da janela.

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── echarts.min.js

Nesta estrutura:

• index.html é a página principal.
• js/echarts.min.js é o arquivo ECharts.
• js/axios.min.js é o arquivo axios.
• css/style.css é o arquivo de estilo.
• data.json é o arquivo de dados para a duração do estudo.

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

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Obtendo os Dados

Nesta etapa, você aprenderá como obter os dados do arquivo data.json e armazená-los nas estruturas de dados necessárias.

1. Abra o arquivo index.html em seu editor de código.
2. Localize a seção // TODO no código JavaScript.
3. Crie dois objetos para armazenar os dados semanais e mensais:

// TODO
let weekData = {
  x: [],
  y: []
};

let monthData = {
  x: [],
  y: []
};

4. Implemente a função mySetOption() para atualizar as opções do gráfico com base nos dados passados para ela.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  myChart.setOption(option);
}

5. Use o método axios.get() para obter os dados do arquivo data.json. A resposta da chamada da API conterá os dados na propriedade res.data.data.

axios.get("./data.json").then((res) => {
  const data = res.data.data;

  // Process the data here
});

6. Dentro da função de callback do método then(), itere sobre o objeto data e processe os dados de duração do estudo para cada dia. Calcule a duração total do estudo para cada semana e mês e armazene os resultados nos objetos weekData e monthData, respectivamente.

for (const key in data) {
  let weekCount = (monthCount = 0),
    weekNum = 1;

  for (let i = 0; i < data[key].length; i++) {
    weekCount += data[key][i];
    monthCount += data[key][i];

    if (
      (i + 1) % 7 === 0 ||
      (data[key].length - i <= 7 && i === data[key].length - 1)
    ) {
      weekData.x.push(`Week ${weekNum++} (${key})`);
      weekData.y.push(weekCount);
      weekCount = 0;
    }
  }
  monthData.x.push(key);
  monthData.y.push(monthCount);
}

7. Após processar os dados, chame a função mySetOption() e passe o objeto weekData para exibir as estatísticas semanais por padrão.

mySetOption(weekData);

8. O efeito do código após esta etapa de processamento é o seguinte:

// TODO
let weekData = {
    x: [],
    y: []
  },
  monthData = {
    x: [],
    y: []
  };

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // reset
  myChart.setOption(option);
}

axios.get("./data.json").then((res) => {
  const data = res.data.data;

  for (const key in data) {
    let weekCount = (monthCount = 0),
      weekNum = 1;

    for (let i = 0; i < data[key].length; i++) {
      weekCount += data[key][i];
      monthCount += data[key][i];

      if (
        (i + 1) % 7 === 0 ||
        (data[key].length - i <= 7 && i === data[key].length - 1)
      ) {
        weekData.x.push(`Week ${weekNum++} (${key})`);
        weekData.y.push(weekCount);
        weekCount = 0;
      }
    }
    monthData.x.push(key);
    monthData.y.push(monthCount);
  }
  mySetOption(weekData);
});

Exibindo o Gráfico

Nesta etapa, você aprenderá como alternar a exibição de gráficos usando a biblioteca ECharts.

1. Abra o arquivo index.html em seu editor de código.
2. Localize a seção mySetOption no código JavaScript.
3. Adicione ouvintes de eventos para as abas (semanal e mensal) após a função mySetOption para atualizar o gráfico quando o usuário clicar nelas.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // reset
  myChart.setOption(option);
}

document.querySelector(".tabs").addEventListener("click", function (e) {
  if (e.target.id === "week") {
    mySetOption(weekData);
  } else if (e.target.id === "month") {
    mySetOption(monthData);
  }
});

Com estas etapas, você concluiu o projeto. O gráfico agora exibirá as estatísticas de duração do estudo semanal e mensal com base nos dados obtidos do arquivo data.json. O efeito final da página é o seguinte:

Resumo

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