Zeit mit deinem Telefon

Einführung

In diesem Projekt lernst du, wie du mithilfe der ECharts-Bibliothek einen Liniendiagramm erstellst. Das Diagramm wird die Anzahl der Stunden anzeigen, die der Benutzer jeden Tag der Woche am Telefon verbringt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Projekt einrichtest und die erforderlichen Dateien öffnest
• Wie du einen Fehler in der ECharts-Konfiguration behebst
• Wie du die Konfiguration des Liniendiagramms verstehst
• Wie du das Diagramm durch Änderung der Konfiguration anpassest

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Die ECharts-Bibliothek zum Erstellen eines Liniendiagramms zu verwenden
• Die Titel, Achsen und Datensätze des Diagramms zu konfigurieren
• Das Diagramm durch Änderung der Konfiguration anzupassen

Skills Graph

Projekt einrichten

In diesem Schritt wirst du das Projekt einrichten und die Dateien im Editor öffnen.

1. Öffne den Editor rechts. Du solltest zwei Dateien sehen - index.html und echarts.js.
2. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
3. Öffne "Web 8080" oben in der VM und aktualisiere es manuell, um die Seite zu sehen.

Fehler in der index.html-Datei beheben

In diesem Schritt wirst du den Fehler in der index.html-Datei beheben.

1. Locate die var option = {}-Section in der index.html-Datei.
2. Es gibt einen Fehler im Konfigurationsobjekt, der dazu führt, dass die Achsen falsch angezeigt werden.
3. Aktualisiere das option-Objekt wie folgt:

var option = {
  title: {
    text: "Stunden, die am Mobiltelefon verbracht werden"
  },
  xAxis: {
    type: "category",
    data: [
      "Montag",
      "Dienstag",
      "Mittwoch",
      "Donnerstag",
      "Freitag",
      "Samstag",
      "Sonntag"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
      type: "line"
    }
  ]
};

4. Verstehe den obigen Code:

• Die title-Eigenschaft setzt den Titel des Liniendiagramms.
• Die xAxis-Eigenschaft konfiguriert die x-Achse, die auf den Typ "category" gesetzt ist und die Wochentage anzeigt.
• Die yAxis-Eigenschaft konfiguriert die y-Achse, die auf den Typ "value" gesetzt ist.
• Die series-Eigenschaft ist die Serie, wobei data die Zeitdaten für jeden Tag der Woche sind, an dem das Telefon genutzt wird, und type der Typ des Diagramms als Liniendiagramm ist.

5. Speichere die Datei und lade die Seite neu, um das aktualisierte Diagramm zu sehen. Das fertige Ergebnis ist wie folgt:

Zusammenfassung

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