Visualização de Dados com Echarts e JSON

Introdução

Neste projeto, você aprenderá como obter dados de um arquivo JSON, renderizar o conteúdo proteico de diferentes alimentos e criar um gráfico de pizza Echarts para visualizar os dados. Este projeto visa fornecer a você uma experiência prática no trabalho com manipulação e visualização de dados usando JavaScript.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como obter dados de um arquivo JSON usando a Fetch API
• Como renderizar o conteúdo proteico de diferentes alimentos na página web
• Como criar um gráfico de pizza Echarts para visualizar os dados de conteúdo proteico

🏆 Conquistas

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

• Obter dados de um arquivo JSON e processar os dados
• Renderizar dinamicamente elementos HTML com base nos dados obtidos
• Usar a biblioteca Echarts para criar um gráfico de pizza interativo
• Integrar a visualização de dados em uma aplicação web

Configurar a Estrutura do Projeto

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

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

├── css
├── index.html
├── lib
└── mock
    └── data.json

Dentre eles:

• index.html é a página principal.
• css é a pasta que armazena os estilos do projeto.
• lib é a pasta que armazena as dependências do projeto.
• mock/data.json são os dados JSON usados na requisição do projeto.

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.

Obter Dados e Renderizar o Conteúdo Proteico

Nesta etapa, você aprenderá como obter dados do arquivo JSON fornecido e renderizar o conteúdo proteico de diferentes alimentos.

1. Abra o arquivo index.html no diretório do projeto.
2. Localize o comentário TODO no arquivo index.html, que está dentro da tag <script>.
3. Dentro da função fetchData, adicione o seguinte código para obter os dados do MockURL e renderizar o conteúdo proteico:

let dataList = ref([]);
async function fetchData() {
  // TODO: código a ser adicionado
  let data = await fetch(MockURL).then((res) => res.json());
  data.unshift({
    name: "header",
    icon: "none"
  });
  echartsInit(data);
  dataList.value = data.slice(1);
}

return {
  echartsInit,
  fetchData
};

4. No hook onMounted, chame a função fetchData para obter os dados e renderizar o conteúdo proteico. Finalmente, ele retorna dentro de return.

onMounted(() => {
  fetchData();
});
return {
  echartsInit,
  fetchData,
  dataList
};

5. Adicione o seguinte código sob TODO: código a ser adicionado para renderizar os dados obtidos em HTML para exibir os dados.

<div class="protein-item" v-for="data in dataList" :key="data.name">
  {{data.name}} {{data.value}}
</div>

6. Salve o arquivo index.html e atualize a página. Agora você deve ver o conteúdo proteico de diferentes alimentos exibido no elemento .protein-container.

O efeito completo é o seguinte:

Parabéns! Você concluiu o projeto "Proteína Alimentar Revelada". Você aprendeu como obter dados de um arquivo JSON, renderizar o conteúdo proteico e criar um gráfico de pizza Echarts para visualizar os dados.

Resumo

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