Le travail acharné porte ses fruits

Introduction

Dans ce projet, vous allez apprendre à créer un graphique statistique des rendements agricoles dans une ville au cours des cinq dernières années à l'aide d'ECharts. Le projet vise à démontrer comment les problèmes pratiques peuvent être analysés grâce à des statistiques sur les rendements agricoles, qui affectent directement la vie des gens.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer l'environnement du projet et comprendre les fichiers fournis
• Comment extraire les données d'un fichier JSON et les traiter pour mettre à jour la visualisation ECharts
• Comment personnaliser l'apparence et la disposition du graphique en ligne et du graphique circulaire

🏆 Réalisations

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

• Utiliser la bibliothèque Axios pour extraire des données d'un fichier JSON
• Manipuler l'objet d'options ECharts pour mettre à jour la visualisation
• Personnaliser les graphiques en ajustant le titre, la disposition et d'autres propriétés

Configurer la structure du projet

Dans cette étape, vous allez configurer la structure du projet et préparer les fichiers et dossiers nécessaires.

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

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

Où :

• index.html est la page principale.
• js/echarts.min.js est le fichier ECharts.
• js/axios.min.js est le fichier axios.
• data.json est les données de production céréalière en tonnes pour l'année correspondante.

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 VM et rafraîchissez manuellement la page pour voir l'effet suivant dans votre navigateur :

Récupérer les données

Dans cette étape, vous allez compléter la requête de données et afficher correctement les données de rendement agricole dans le graphique en ligne et le graphique circulaire.

1. Dans le fichier index.html, localisez la section // TODO.
2. Utilisez la méthode axios.get() pour récupérer les données à partir du fichier data.json.

axios.get("./data.json").then((res) => {
  let data = res.data.data;
  // TODO: Traitez les données et mettez à jour l'objet d'option
});

3. À l'intérieur de la fonction de rappel .then(), traitez les données du fichier data.json et mettez à jour l'objet option en conséquence.
   • Créez un objet dataObj pour stocker les données de chaque type de culture.
   • Créez un tableau sourceTip pour stocker les étiquettes des données.
   • Parcourez les données et remplit les tableaux dataObj et sourceTip.
   • Créez un nouveau tableau newSource et remplit-le avec les données de dataObj et sourceTip.
   • Mettez à jour option.dataset.source avec le tableau newSource.
   • Appelez myChart.setOption(option) pour mettre à jour le graphique avec les nouvelles données.

// TODO
let dataObj = {
  blé: ["wheat"],
  soja: ["soybean"],
  pomme de terre: ["potato"],
  maïs: ["corn"]
};
let sourceTip = ["tout"];

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. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez maintenant voir le graphique en ligne et le graphique circulaire mis à jour avec les données correctes.

Résumé

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