Créer un graphique d'évolution météorologique avec Vue et Echarts

Introduction

Dans ce projet, vous allez apprendre à créer un graphique de tendance météorologique qui affiche les données de température d'une ville tout au long de l'année. Le graphique permettra aux utilisateurs de basculer entre les données du mois en cours et les données des 7 prochains jours, offrant une vision globale des tendances météorologiques.

👀 Aperçu

L'effet de basculement entre "Le mois en cours" et "Les 7 prochains jours" est montré dans la figure ci-dessous :

Image Description

L'effet de basculement des mois est le suivant :

Image Description

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment récupérer des données météorologiques à partir d'un fichier JSON à l'aide d'Axios
Comment afficher une liste de mois et gérer l'événement de clic pour changer les données affichées
Comment implémenter des onglets pour basculer entre les données du mois en cours et les données des 7 prochains jours
Comment initialiser et personnaliser un graphique Echarts pour afficher les données météorologiques

🏆 Réalisations

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

Récupérer des données à partir d'un fichier JSON à l'aide d'Axios
Créer une interface utilisateur responsive et interactive avec Vue.js
Utiliser Echarts pour créer un graphique personnalisé avec des fonctionnalités avancées
Gérer les interactions de l'utilisateur et mettre à jour le graphique en conséquence
Appliquer vos connaissances en développement front-end, visualisation de données et conception de l'expérience utilisateur

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
├── js
│   ├── axios.js
│   ├── echarts.min.js
│   ├── vue.min.js
│   └── weather.json
└── index.html

Où :

css/style.css est le fichier de style.
js/axios.js est le fichier axios.
js/vue.min.js est le fichier vue2.x.
js/echarts.min.js est le fichier echarts.
js/weather.json est les données météorologiques nécessaires à la requête.
index.html est la page principale.

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.

Image Description

Récupérer les données météorologiques

Dans cette étape, vous allez apprendre à récupérer les données météorologiques à partir du fichier JSON fourni.

Dans le fichier index.html, localisez la balise <script> en bas du fichier.
À l'intérieur de la balise <script>, créez une nouvelle instance Vue en utilisant new Vue().
Dans l'option data de l'instance Vue, ajoutez les attributs suivants et assignez des valeurs initiales.

data: {
  //...
  data: [],
  yData: [],
  xData: [],
},

Dans le hook methods de l'instance Vue, localisez this.chartOptions dans la fonction initChart et changez les data dans xAxis et series pour les variables correspondantes comme suit :

this.chartOptions = {
  //...
  xAxis: [
    {
      //...
      data: this.xData
    }
  ],
  //...
  series: [
    {
      //...
      data: this.yData
    }
  ]
};

Dans le hook mounted de l'instance Vue, utilisez la méthode axios.get() pour récupérer les données météorologiques à partir du fichier ./js/weather.json. Le code modifié est le suivant :

mounted: async function () {
  const res = await axios.get("./js/weather.json");
  this.data = res.data;
  this.yData = res.data[0]["January"];
  this.xData = [...this.yData.map((e, i) => i + 1)];
  this.$nextTick(() => {
    this.initChart();
  });
},

Ce code récupère les données météorologiques à partir du fichier JSON, les stocke dans la propriété data, puis définit les propriétés initiales yData et xData pour le graphique. Enfin, il appelle la méthode initChart() pour afficher le graphique.

Afficher la liste des mois

Dans cette étape, vous allez apprendre à afficher la liste des mois et à gérer l'événement de clic pour changer les données affichées.

Dans le fichier index.html, dans l'option data de l'instance Vue, ajoutez les attributs suivants et assignez des valeurs initiales.

data: {
  //...
  monthName: "January",
  monthNumber: 0,
},

Dans l'élément <ul> avec la classe class="month", utilisez une directive v-for pour afficher la liste des mois. Ajoutez un gestionnaire d'événement de clic aux éléments <li> pour appeler la méthode changeMonth() lorsqu'un mois est cliqué.

<ul>
  <li
    v-for="(item,key,index) in monthList"
    :class="[monthName===key?'active':'']"
    @click="changeMonth(key,index)"
  >
    {{item}}
  </li>
</ul>

Dans la section methods de l'instance Vue, ajoutez la méthode changeMonth(), qui met à jour les propriétés monthName, monthNumber, yData et xData en fonction du mois sélectionné, puis appelle la méthode initChart() pour rafraîchir l'affichage du graphique.

changeMonth(month, index) {
  this.monthName = month;
  this.monthNumber = index;

  this.yData = this.data[index][month];
  this.xData = [...this.yData.map((e, i) => i + 1)];

  if (index === this.nowMonth) {
    this.type = 1;
  }
  this.initChart();
},

Implémenter les onglets du mois en cours et des 7 prochains jours

Dans cette étape, vous allez apprendre à implémenter les onglets qui permettent à l'utilisateur de basculer entre les données du mois en cours et les données des 7 prochains jours.

Dans le fichier index.html, dans la section data de l'instance Vue, ajoutez les propriétés suivantes :

data: {
  type: 1, // Statut des données pour les 7 prochains jours et le mois en cours
  nowMonth: new Date().getMonth(),
},

Dans le <div> avec l'id="currentMonth", ajoutez un affichage conditionnel basé sur les propriétés monthNumber et nowMonth. Cela n'affichera que l'onglet pour le mois en cours.

<div id="currentMonth" v-if="monthNumber===nowMonth">
  <div class="title">
    <h3>{{typeTitle}}</h3>
    <div class="type" @click="clickType($event)">
      <span id="seven" :class="{'active':!type}">Les 7 prochains jours</span>
      <span id="current" :class="{'active':type}">Le mois en cours</span>
    </div>
  </div>
</div>

Dans la section methods de l'instance Vue, ajoutez la méthode clickType(), qui met à jour les propriétés type, typeTitle, yData et xData en fonction de l'onglet cliqué, puis appelle la méthode initChart() pour rafraîchir l'affichage du graphique.

clickType(e) {
  switch (e.target.id) {
    case "seven":
      this.type = 0;
      this.typeTitle = "Les 7 prochains jours";
      [this.xData, this.yData] = this.getSevenData();
      break;
    case "current":
      this.type = 1;
      this.typeTitle = "Le mois en cours";
      this.yData = this.data[this.monthNumber][this.monthName];
      this.xData = [...this.yData.map((e, i) => i + 1)];
      break;
  }
  this.initChart();
},

Ajoutez la méthode getSevenData(), qui calcule les étiquettes de l'axe x et les données de l'axe y pour les 7 prochains jours.

getSevenData() {
  let newXdata = [],
    newYdata = [];
  for (let i = 0; i < 7; i++) {
    let now = new Date();
    let time = now.getTime() + 1000 * 60 * 60 * 24 * i;
    now.setTime(time);
    newXdata.push(`${now.getMonth() + 1}/${now.getDate()}`);

    if (this.monthNumber === now.getMonth()) {
      newYdata.push(this.yData[now.getDate() - 1]);
    } else {
      let nextMonth = this.data[now.getMonth()];
      for (const key in nextMonth) {
        newYdata.push(nextMonth[key][now.getDate() - 1]);
      }
    }
  }
  return [newXdata, newYdata];
},

Cette méthode calcule les étiquettes de l'axe x et les données de l'axe y pour les 7 prochains jours, en tenant compte de la transition entre les mois.

Enregistrez le fichier et rechargez la page pour voir le graphique mis à jour. La figure suivante montre l'effet de basculement entre "le mois en cours" et "les 7 prochains jours" (obtenu via la fonction de temps, ici en supposant avril) :

Image Description

L'effet de basculement des mois est le suivant :

Image Description