Hartes Arbeiten lohnt sich

Einführung

In diesem Projekt lernst du, wie du mithilfe von ECharts einen statistischen Diagramm der landwirtschaftlichen Erträge in einer Stadt über die vergangenen fünf Jahre erstellen kannst. Ziel des Projekts ist es, zu demonstrieren, wie praktische Probleme durch Statistiken über landwirtschaftliche Erträge, die direkt das Lebensalltagswesen der Menschen betreffen, analysiert werden können.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du die Projektumgebung einrichtest und die bereitgestellten Dateien verstehst
• Wie du Daten aus einer JSON-Datei abrufst und verarbeitest, um die ECharts-Visualisierung zu aktualisieren
• Wie du das Aussehen und die Layout der Linien- und Kreisdiagramme anpassen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Die Axios-Bibliothek zum Abrufen von Daten aus einer JSON-Datei zu verwenden
• Das ECharts-Optionenobjekt zu manipulieren, um die Visualisierung zu aktualisieren
• Die Diagramme durch Anpassen des Titels, des Layouts und anderer Eigenschaften anzupassen

Projektstruktur einrichten

In diesem Schritt wirst du die Projektstruktur einrichten und die erforderlichen Dateien und Ordner vorbereiten.

Öffne den Projektordner in deinem Code-Editor. Die Verzeichnisstruktur ist wie folgt:

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

Dabei gilt:

• index.html ist die Hauptseite.
• js/echarts.min.js ist die ECharts-Datei.
• js/axios.min.js ist die axios-Datei.
• data.json enthält die Getreideproduktionsdaten in Tonnen für das entsprechende Jahr.

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

Als Nächstes öffne die Option "Web 8080" oben im VM und aktualisiere die Seite manuell, um das folgende Ergebnis im Browser zu sehen:

Daten abrufen

In diesem Schritt wirst du die Datenanfrage abschließen und die landwirtschaftlichen Erträgedaten korrekt im Linien- und Kreisdiagramm anzeigen.

1. Öffne die Datei index.html und suche den Abschnitt // TODO.
2. Verwende die Methode axios.get(), um die Daten aus der Datei data.json abzurufen.

axios.get("./data.json").then((res) => {
  let data = res.data.data;
  // TODO: Verarbeite die Daten und aktualisiere das Optionenobjekt
});

3. Innerhalb des .then()-Callbacks verarbeite die Daten aus der Datei data.json und aktualisiere das option-Objekt entsprechend.
   • Erstelle ein Objekt dataObj, um die Daten für jede Getreideart zu speichern.
   • Erstelle ein Array sourceTip, um die Labels für die Daten zu speichern.
   • Gehe durch die Daten und fülle die Arrays dataObj und sourceTip auf.
   • Erstelle ein neues Array newSource und fülle es mit den Daten aus dataObj und sourceTip.
   • Aktualisiere option.dataset.source mit dem Array newSource.
   • Rufe myChart.setOption(option) auf, um das Diagramm mit den neuen Daten zu aktualisieren.

// TODO
let dataObj = {
  weizen: ["weizen"],
  sojabohne: ["sojabohne"],
  kartoffel: ["kartoffel"],
  mais: ["mais"]
};
let sourceTip = ["alle"];

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. Speichere die Datei index.html und aktualisiere die Seite. Du solltest jetzt das aktualisierte Linien- und Kreisdiagramm mit den korrekten Daten sehen.

Zusammenfassung

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