O Trabalho Duro Compensa

Introdução

Neste projeto, você aprenderá a criar um gráfico estatístico de rendimentos de culturas em uma cidade nos últimos cinco anos usando ECharts. O projeto visa demonstrar como problemas práticos podem ser analisados através de estatísticas sobre rendimentos de culturas, que afetam diretamente a subsistência das pessoas.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o ambiente do projeto e entender os arquivos fornecidos
• Como obter os dados de um arquivo JSON e processá-los para atualizar a visualização do ECharts
• Como personalizar a aparência e o layout do gráfico de linhas e do gráfico de pizza

🏆 Conquistas

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

• Usar a biblioteca Axios para obter dados de um arquivo JSON
• Manipular o objeto de opções do ECharts para atualizar a visualização
• Personalizar os gráficos ajustando o título, o layout e outras propriedades

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:

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

Onde:

• index.html é a página principal.
• js/echarts.min.js é o arquivo do ECharts.
• js/axios.min.js é o arquivo do axios.
• data.json são os dados de produção de grãos em toneladas para o ano correspondente.

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 e atualize manualmente a página para ver o seguinte efeito no seu navegador:

Obter os Dados

Nesta etapa, você completará a requisição de dados e exibirá os dados de rendimento da cultura corretamente no gráfico de linhas e no gráfico de pizza.

1. No arquivo index.html, localize a seção // TODO.
2. Use o método axios.get() para obter os dados do arquivo data.json.

axios.get("./data.json").then((res) => {
  let data = res.data.data;
  // TODO: Process the data and update the option object
});

3. Dentro do callback .then(), processe os dados do arquivo data.json e atualize o objeto option de acordo.
   • Crie um objeto dataObj para armazenar os dados para cada tipo de cultura.
   • Crie um array sourceTip para armazenar os rótulos para os dados.
   • Itere pelos dados e preencha os arrays dataObj e sourceTip.
   • Crie um novo array newSource e preencha-o com os dados de dataObj e sourceTip.
   • Atualize option.dataset.source com o array newSource.
   • Chame myChart.setOption(option) para atualizar o gráfico com os novos dados.

// TODO
let dataObj = {
  wheat: ["wheat"],
  soybean: ["soybean"],
  potato: ["potato"],
  corn: ["corn"]
};
let sourceTip = ["all"];

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

  for (const key1 in data) {
    sourceTip.push(key1);
    for (const key2 in data[key1]) {
      dataObj[key2].push(data[key1][key2]);
    }
  }

  let newSource = [];
  newSource.push(sourceTip);
  for (const key in dataObj) {
    newSource.push(dataObj[key]);
  }

  option.dataset.source = newSource;
  myChart.setOption(option);
});

4. Salve o arquivo index.html e atualize a página. Agora você deve ver o gráfico de linhas e o gráfico de pizza atualizados com os dados corretos.

Resumo

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