Visualisation de données avec Echarts et JSON

Introduction

Dans ce projet, vous allez apprendre à extraire des données à partir d'un fichier JSON, à afficher le contenu protéique de différents aliments et à créer un diagramme circulaire Echarts pour visualiser les données. Ce projet vise à vous offrir une expérience pratique dans la manipulation et la visualisation de données à l'aide de JavaScript.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment extraire des données à partir d'un fichier JSON à l'aide de l'API Fetch
• Comment afficher le contenu protéique de différents aliments sur une page web
• Comment créer un diagramme circulaire Echarts pour visualiser les données de contenu protéique

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Extraire des données à partir d'un fichier JSON et de traiter les données
• Afficher dynamiquement des éléments HTML sur la base des données extraites
• Utiliser la bibliothèque Echarts pour créer un diagramme circulaire interactif
• Intégrer la visualisation de données dans une application web

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

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

Dans lequel :

• index.html est la page principale.
• css est le dossier qui stocke les styles du projet.
• lib est le dossier qui stocke les dépendances du projet.
• mock/data.json est les données JSON utilisées dans la requête du projet.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE, pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Extraire les données et afficher le contenu protéique

Dans cette étape, vous allez apprendre à extraire des données à partir du fichier JSON fourni et à afficher le contenu protéique de différents aliments.

1. Ouvrez le fichier index.html dans le répertoire du projet.
2. Localisez le commentaire TODO dans le fichier index.html, qui se trouve à l'intérieur de la balise <script>.
3. Dans la fonction fetchData, ajoutez le code suivant pour extraire les données à partir de MockURL et afficher le contenu protéique :

let dataList = ref([]);
async function fetchData() {
  // TODO: code à ajouter
  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. Dans le hook onMounted, appelez la fonction fetchData pour extraire les données et afficher le contenu protéique. Enfin, il renvoie à l'intérieur de return.

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

5. Ajoutez le code suivant sous TODO: code à ajouter pour afficher les données extraites dans le HTML pour afficher les données.

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

6. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez maintenant voir le contenu protéique de différents aliments affiché dans l'élément .protein-container.

L'effet obtenu est le suivant :

Félicitations! Vous avez terminé le projet "Le contenu protéique des aliments révélé". Vous avez appris à extraire des données à partir d'un fichier JSON, à afficher le contenu protéique et à créer un diagramme circulaire Echarts pour visualiser les données.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.