Wettertrenddiagramm mit Vue und Echarts

Einführung

In diesem Projekt lernst du, wie du einen Wettertrenddiagramm erstellen, das die Temperaturdaten für eine Stadt über das ganze Jahr anzeigt. Das Diagramm ermöglicht es Benutzern, zwischen den Daten des aktuellen Monats und den Daten der nächsten 7 Tage zu schalten und bietet somit einen umfassenden Überblick über die Wettertrends.

👀 Vorschau

Der UmschaltEffekt zwischen "Aktueller Monat" und "Nächste 7 Tage" ist in der folgenden Abbildung dargestellt:

Der Monat-UmschaltEffekt ist wie folgt:

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du Wetterdaten aus einer JSON-Datei mit Axios abrufst
• Wie du eine Liste von Monaten rendern und das Klickereignis behandeln, um die angezeigten Daten zu ändern
• Wie du Registerkarten implementierst, um zwischen den Daten des aktuellen Monats und den Daten der nächsten 7 Tage zu schalten
• Wie du einen Echarts-Diagramm initialisierst und anpassst, um die Wetterdaten anzuzeigen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Daten aus einer JSON-Datei mit Axios abzurufen
• Mit Vue.js eine responsive und interaktive Benutzeroberfläche zu erstellen
• Mit Echarts ein benutzerdefiniertes Diagramm mit erweiterteren Funktionen zu erstellen
• Benutzerinteraktionen zu behandeln und das Diagramm entsprechend zu aktualisieren
• Dein Wissen um die Front-End-Entwicklung, die Datenvisualisierung und das Benutzererfahrungsdesign anzuwenden

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne das Projektverzeichnis. Die Verzeichnisstruktur ist wie folgt:

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

Dabei gilt:

• css/style.css ist die Stylesheet-Datei.
• js/axios.js ist die Axios-Datei.
• js/vue.min.js ist die Vue2.x-Datei.
• js/echarts.min.js ist die Echarts-Datei.
• js/weather.json sind die für die Anfrage erforderlichen Wetterdaten.
• index.html ist die Hauptseite.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Wetterdaten abrufen

In diesem Schritt wirst du lernen, wie du die Wetterdaten aus der bereitgestellten JSON-Datei abrufst.

1. Öffne die Datei index.html und finde das <script>-Tag am Ende der Datei.
2. Innerhalb des <script>-Tags erstelle eine neue Vue-Instanz mit new Vue().
3. Im data-Option der Vue-Instanz füge die folgenden Attribute hinzu und weise ihnen Anfangswerte zu.

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

4. Im methods-Hook der Vue-Instanz finde in der initChart-Funktion this.chartOptions und ändere das data in der xAxis und der Reihe in die entsprechenden Variablen wie folgt:

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

5. Im mounted-Hook der Vue-Instanz verwende die axios.get()-Methode, um die Wetterdaten aus der Datei ./js/weather.json abzurufen. Der modifizierte Code lautet wie folgt:

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();
  });
},

Dieser Code ruft die Wetterdaten aus der JSON-Datei ab, speichert sie in der data-Eigenschaft und setzt dann die Anfangswerte für yData und xData für das Diagramm. Schließlich ruft er die initChart()-Methode auf, um das Diagramm zu rendern.

Monatsliste rendern

In diesem Schritt wirst du lernen, wie du die Liste der Monate rendern und das Klickereignis behandeln, um die angezeigten Daten zu ändern.

1. Öffne die Datei index.html und füge im data-Option der Vue-Instanz die folgenden Attribute hinzu und weise ihnen Anfangswerte zu.

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

2. Im <ul>-Element mit der class="month" verwende die v-for-Direktive, um die Liste der Monate zu rendern. Füge einem Klickereignishandler zu den <li>-Elementen hinzu, um die changeMonth()-Methode aufzurufen, wenn ein Monat angeklickt wird.

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

3. Im methods-Abschnitt der Vue-Instanz füge die changeMonth()-Methode hinzu, die die monthName, monthNumber, yData und xData-Eigenschaften basierend auf dem ausgewählten Monat aktualisiert und dann die initChart()-Methode aufruft, um das Diagramm neu zu rendern.

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();
},

Aktuellen Monat und die nächsten 7 Tage Registerkarten implementieren

In diesem Schritt wirst du lernen, wie du die Registerkarten implementierst, die es Benutzern ermöglichen, zwischen den Daten des aktuellen Monats und den Daten der nächsten 7 Tage zu schalten.

1. Öffne die Datei index.html und füge im data-Abschnitt der Vue-Instanz die folgenden Eigenschaften hinzu:

data: {
  type: 1, // Status der Daten für die nächsten 7 Tage und den aktuellen Monat
  nowMonth: new Date().getMonth(),
},

2. Im <div> mit der id="currentMonth" füge eine bedingte Darstellung basierend auf den monthNumber und nowMonth-Eigenschaften hinzu. Dies wird nur die Registerkarte für den aktuellen Monat anzeigen.

<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}">Die nächsten 7 Tage</span>
      <span id="current" :class="{'active':type}">Der aktuelle Monat</span>
    </div>
  </div>
</div>

3. Im methods-Abschnitt der Vue-Instanz füge die clickType()-Methode hinzu, die die type, typeTitle, yData und xData-Eigenschaften basierend auf der angeklickten Registerkarte aktualisiert und dann die initChart()-Methode aufruft, um das Diagramm neu zu rendern.

clickType(e) {
  switch (e.target.id) {
    case "seven":
      this.type = 0;
      this.typeTitle = "Die nächsten 7 Tage";
      [this.xData, this.yData] = this.getSevenData();
      break;
    case "current":
      this.type = 1;
      this.typeTitle = "Der aktuelle Monat";
      this.yData = this.data[this.monthNumber][this.monthName];
      this.xData = [...this.yData.map((e, i) => i + 1)];
      break;
  }
  this.initChart();
},

4. Füge die getSevenData()-Methode hinzu, die die x-Achsenbeschriftungen und die y-Achsendaten für die nächsten 7 Tage berechnet.

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];
},

Diese Methode berechnet die x-Achsenbeschriftungen und die y-Achsendaten für die nächsten 7 Tage, wobei der Übergang zwischen Monaten berücksichtigt wird.

5. Speichere die Datei und lade die Seite neu, um das aktualisierte Diagramm zu sehen. Die folgende Abbildung zeigt den Effekt des Umschaltens zwischen "dem aktuellen Monat" und "den nächsten 7 Tagen" (erhalten über die Zeitfunktion, hier wird April angenommen):

Der Monat-UmschaltEffekt ist wie folgt:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.