Datenvisualisierung mit Echarts und JSON

Einführung

In diesem Projekt lernst du, wie du Daten aus einer JSON-Datei abrufen, den Protein-Gehalt verschiedener Lebensmittel darstellen und einen Echarts-Kreisschlüssel zur Visualisierung der Daten erstellen kannst. Ziel dieses Projekts ist es, dir einen praxisnahen Einblick in die Arbeit mit Datenmanipulation und -visualisierung mit JavaScript zu geben.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du Daten aus einer JSON-Datei mithilfe der Fetch-API abrufst
• Wie du den Protein-Gehalt verschiedener Lebensmittel auf der Webseite darstellst
• Wie du einen Echarts-Kreisschlüssel zur Visualisierung der Protein-Gehaltsdaten erstellst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Daten aus einer JSON-Datei abzurufen und zu verarbeiten
• HTML-Elemente dynamisch basierend auf den abgerufenen Daten zu rendern
• Die Echarts-Bibliothek zum Erstellen eines interaktiven Kreisschlüssels zu verwenden
• Die Datenvisualisierung in eine Webanwendung zu integrieren

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
├── index.html
├── lib
└── mock
    └── data.json

Darin:

• index.html ist die Hauptseite.
• css ist der Ordner, in dem die Projektstile gespeichert werden.
• lib ist der Ordner, in dem die Projektabhängigkeiten gespeichert werden.
• mock/data.json ist die JSON-Daten, die bei der Projektanfrage verwendet werden.

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 in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Daten abrufen und Protein-Gehalt darstellen

In diesem Schritt wirst du lernen, wie du Daten aus der bereitgestellten JSON-Datei abrufst und den Protein-Gehalt verschiedener Lebensmittel darstellst.

1. Öffne die Datei index.html im Projektverzeichnis.
2. Locate the TODO comment in the index.html file, which is inside the <script> tag.
3. Füge im Inneren der fetchData-Funktion folgenden Code hinzu, um die Daten aus der MockURL abzurufen und den Protein-Gehalt darzustellen:

let dataList = ref([]);
async function fetchData() {
  // TODO: code to be added
  let data = await fetch(MockURL).then((res) => res.json());
  data.unshift({
    name: "header",
    icon: "none"
  });
  echartsInit(data);
  dataList.value = data.slice(1);
}

return {
  echartsInit,
  fetchData
};

4. Im onMounted-Hook rufe die fetchData-Funktion auf, um die Daten abzurufen und den Protein-Gehalt darzustellen. Am Ende wird es innerhalb von return zurückgegeben.

onMounted(() => {
  fetchData();
});
return {
  echartsInit,
  fetchData,
  dataList
};

5. Füge folgenden Code unter TODO: code to be added to render the fetched data in HTML hinzu, um die Daten anzuzeigen.

<div class="protein-item" v-for="data in dataList" :key="data.name">
  {{data.name}} {{data.value}}
</div>

6. Speichere die Datei index.html und aktualisiere die Seite. Du solltest jetzt den Protein-Gehalt verschiedener Lebensmittel im .protein-container-Element sehen.

Das abgeschlossene Ergebnis ist wie folgt:

Herzlichen Glückwunsch! Du hast das Projekt "Food Protein Revealed" abgeschlossen. Du hast gelernt, wie du Daten aus einer JSON-Datei abrufst, den Protein-Gehalt darstellst und einen Echarts-Kreisschlüssel zur Visualisierung der Daten erstellst.

Zusammenfassung

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