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
