Erstelle interaktive Balkendiagramme mit ECharts | Datenvisualisierung

Einführung

In diesem Projekt lernst du, wie du mithilfe der ECharts JavaScript-Bibliothek einen Balkendiagramm erstellen, um die Leistungsstatistiken von Schülern darzustellen. ECharts ist ein leistungsstarkes Datenvisualisierungstool, das dir hilft, interaktive und visuell ansprechende Diagramme zu erstellen, um deine Daten darzustellen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du einen Fehler im Initialcode beheben, um das Diagramm korrekt anzuzeigen
Wie du die Einstellungen der x-Achse und y-Achse ändern, um sicherzustellen, dass das Diagramm in der richtigen Richtung angezeigt wird
Wie du die Daten in der Reihe anpassen, um der Reihenfolge der x-Achsenbeschriftungen zu entsprechen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Eine ECharts-Instanz zu initialisieren und die Diagrammoptionen zu konfigurieren
Die Eigenschaften der x-Achse und y-Achse zu definieren, um das Aussehen des Diagramms zu steuern
Die Daten in der Reihe zu aktualisieren, um der gewünschten Visualisierung zu entsprechen

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 sieht wie folgt aus:

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

Dabei gilt:

index.html ist die Hauptseite.
js/echarts.js ist die ECharts-Datei.

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

Als Nächstes öffne die "Web 8080" oben auf der VM, aktualisiere die Seite manuell und du wirst feststellen, dass die Seite leer ist. Öffne in diesem Moment die Konsole, und du wirst die folgende Fehlermeldung sehen:

Den Fehler beheben

In diesem Schritt wirst du lernen, wie du den Fehler im Projekt behebst, sodass das Diagramm angezeigt werden kann.

Öffne die Datei index.html im bereitgestellten Projekt.
Es wurde festgestellt, dass der Code im Skript-Tag eine undefined x-Achse hat. Bei einem echars-Diagramm müssen sowohl die x-Achse als auch die y-Achse definiert sein, unabhängig davon, ob es Daten gibt. Daher haben wir die folgenden Änderungen am Code unter var option = {...}; innerhalb von TODO vorgenommen:

// TODO
// xAxis
xAxis: {
  data: ["Tom", "Tony", "Lucas", "Lucy", "Anna", "Kevin"]
},
// yAxis
yAxis: {},
series: [
  {
    name: "grades",
    type: "bar",
    data: [55, 90, 65, 70, 80, 63]
  }
]

Dadurch wird der Fehler behoben und das Diagramm kann angezeigt werden.