Echtzeit-Verkaufsdashboard mit Echarts

Einführung

In diesem Projekt lernst du, wie du eine Echtzeit-Verkaufsdashboard mit der Echarts-Bibliothek erstellen kannst. Das Dashboard wird die Verkaufs- und Volumedaten in einem visuell ansprechenden und leicht verständlichen Format anzeigen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Projekt einrichtest und die erforderlichen Dateien erhältst
• Wie du die "y-Achse" in der index.js-Datei einrichtest
• Wie du die Werte aus den Backend-Daten korrekt den entsprechenden Diagrammoptionen in der renderChart-Funktion zuweist

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Daten in Diagramme mit der Echarts-Bibliothek zu rendern
• Deinen Code für ein Datenvisualisierungsprojekt zu strukturieren und zu organisieren
• Mit asynchronem Datenabruf umzugehen und das Diagramm in Echtzeit zu aktualisieren

Skills Graph

Projektstruktur einrichten

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

Öffne den Projektordner. Die Verzeichnisstruktur sieht wie folgt aus:

├── echarts.js
├── index.css
├── index.html
└── index.js

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, um die Seite zu sehen.

Die y-Achse-Einstellung abschließen

In diesem Schritt wirst du lernen, wie du die "y-Achse"-Einstellung in der index.js-Datei abschließt.

1. Öffne die index.js-Datei.

2. Finde die y-Achse-Konfiguration im option-Objekt.

3. Aktualisiere die y-Achse-Konfiguration, um die folgenden Anforderungen zu erfüllen:

   • Der erste Eintrag sollte name als "sales" und position auf der linken Seite des Diagramms haben.
   • Der zweite Eintrag sollte name als "volume" und position auf der rechten Seite des Diagramms haben.

Deine aktualisierte y-Achse-Konfiguration sollte so aussehen:

yAxis: [
  {
    type: "value",
    name: "sales",
    position: "left"
  },
  {
    type: "value",
    name: "volum",
    position: "right"
  }
],

Die renderChart-Funktion abschließen

In diesem Schritt wirst du lernen, wie du die renderChart-Funktion in der index.js-Datei abschließt.

1. Öffne die index.js-Datei.
2. Finde die renderChart-Funktion.
3. Vollende den Code in der renderChart-Funktion, um die Werte aus saleObj und countObj korrekt der Zeit für die X-Achse sowie den Verkauf und das Volumen für die Y-Achse zuzuweisen.

Deine aktualisierte renderChart-Funktion sollte so aussehen:

async function renderChart() {
  const result = await Ajax();
  document.querySelector("#result").innerText = JSON.stringify(result);
  const myChart = echarts.init(document.getElementById("main"));

  // Zuweise die Werte aus `saleObj` und `countObj` zu den entsprechenden Optionen
  option.xAxis.data = Object.keys(result.data.saleObj);
  option.series[0].data = Object.values(result.data.saleObj);
  option.series[1].data = Object.values(result.data.countObj);

  myChart.setOption(option, true);
  document.querySelector("#data").innerText = JSON.stringify(charData);
}

Nach Abschluss dieser Schritte sollte dein Verkaufsdashboard-Projekt vollständig funktionieren und die Echtzeit-Verkaufs- und Volumedaten korrekt anzeigen. Die Endseite sieht wie folgt aus:

Zusammenfassung

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