La Mer Infinie de l'Apprentissage

Introduction

Dans ce projet, vous allez apprendre à créer un graphique de visualisation de données à l'aide de la bibliothèque ECharts. Le projet vise à aider Lucy, une utilisatrice d'une plateforme d'apprentissage en ligne, à mieux visualiser son temps d'étude quotidien.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment extraire des données à partir d'un fichier JSON et les traiter pour extraire les informations nécessaires.
• Comment utiliser la bibliothèque ECharts pour créer un graphique à barres qui affiche les statistiques de la durée d'étude hebdomadaire et mensuelle.
• Comment implémenter une interaction permettant à l'utilisateur de basculer entre les vues hebdomadaires et mensuelles.
• Comment redimensionner dynamiquement le graphique lorsque la fenêtre est redimensionnée.

🏆 Réalisations

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

• Extraire des données à partir d'un fichier JSON et les manipuler pour la visualisation.
• Configurer et personnaliser un graphique à barres ECharts pour afficher les statistiques de la durée d'étude.
• Ajouter une interaction au graphique et gérer les interactions de l'utilisateur.
• S'assurer que le graphique reste réactif et s'adapte au redimensionnement de la fenêtre.

Configurer la structure du projet

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

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

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

Dans cette structure :

• index.html est la page principale.
• js/echarts.min.js est le fichier ECharts.
• js/axios.min.js est le fichier axios.
• css/style.css est le fichier de style.
• data.json est le fichier de données pour la durée d'étude.

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 pour voir la page.

Récupération des données

Dans cette étape, vous allez apprendre à récupérer les données à partir du fichier data.json et à les stocker dans les structures de données nécessaires.

1. Ouvrez le fichier index.html dans votre éditeur de code.
2. Localisez la section // TODO dans le code JavaScript.
3. Créez deux objets pour stocker les données hebdomadaires et mensuelles :

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

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

4. Implémentez la fonction mySetOption() pour mettre à jour les options du graphique en fonction des données passées à la fonction.

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

5. Utilisez la méthode axios.get() pour récupérer les données à partir du fichier data.json. La réponse de l'appel API contiendra les données dans la propriété res.data.data.

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

  // Traitez les données ici
});

6. Dans la fonction de rappel de la méthode then(), itérez sur l'objet data et traitez les données de la durée d'étude pour chaque jour. Calculez la durée totale d'étude pour chaque semaine et chaque mois, et stockez les résultats dans les objets weekData et monthData respectivement.

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(`Semaine ${weekNum++} (${key})`);
      weekData.y.push(weekCount);
      weekCount = 0;
    }
  }
  monthData.x.push(key);
  monthData.y.push(monthCount);
}

7. Après avoir traité les données, appelez la fonction mySetOption() et passez l'objet weekData pour afficher les statistiques hebdomadaires par défaut.

mySetOption(weekData);

8. L'effet du code après cette étape de traitement est le suivant :

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

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // réinitialiser
  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(`Semaine ${weekNum++} (${key})`);
        weekData.y.push(weekCount);
        weekCount = 0;
      }
    }
    monthData.x.push(key);
    monthData.y.push(monthCount);
  }
  mySetOption(weekData);
});

Affichage du graphique

Dans cette étape, vous allez apprendre à basculer l'affichage des graphiques à l'aide de la bibliothèque ECharts.

1. Ouvrez le fichier index.html dans votre éditeur de code.
2. Localisez la section mySetOption dans le code JavaScript.
3. Ajoutez des écouteurs d'événements pour les onglets (hebdomadaires et mensuels) après la fonction mySetOption pour mettre à jour le graphique lorsque l'utilisateur clique dessus.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // réinitialiser
  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);
  }
});

Avec ces étapes, vous avez terminé le projet. Le graphique affichera désormais les statistiques de la durée d'étude hebdomadaire et mensuelle en fonction des données extraites du fichier data.json. L'effet final de la page est le suivant :

Résumé

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