Das grenzenlose Lernmeer

Einführung

In diesem Projekt lernst du, wie du mithilfe der ECharts-Bibliothek einen Datenvisualisierungsdiagramm erstellst. Ziel des Projekts ist es, Lucy, einem Benutzer einer Online-Lernplattform, zu helfen, ihre tägliche Lernzeit besser zu visualisieren.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du Daten aus einer JSON-Datei abrufst und verarbeitest, um die erforderlichen Informationen zu extrahieren.
• Wie du die ECharts-Bibliothek verwendest, um ein Säulendiagramm zu erstellen, das die wöchentlichen und monatlichen Lernzeitstatistiken anzeigt.
• Wie du Interaktivität implementierst, um es dem Benutzer zu ermöglichen, zwischen der wöchentlichen und monatlichen Ansicht zu schalten.
• Wie du das Diagramm dynamisch anpassest, wenn das Fenster vergrößert oder verkleinert wird.

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Daten aus einer JSON-Datei abzurufen und für die Visualisierung zu manipulieren.
• Ein ECharts-Säulendiagramm zu konfigurieren und anzupassen, um Lernzeitstatistiken anzuzeigen.
• Interaktivität zum Diagramm hinzuzufügen und Benutzerinteraktionen zu verarbeiten. -确保图表保持响应式并适应窗口大小调整。

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 ist wie folgt:

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

In dieser Struktur:

• index.html ist die Hauptseite.
• js/echarts.min.js ist die ECharts-Datei.
• js/axios.min.js ist die axios-Datei.
• css/style.css ist die Styledatei.
• data.json ist die Daten-Datei für die Lernzeit.

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.

Daten abrufen

In diesem Schritt wirst du lernen, wie du die Daten aus der data.json-Datei abrufst und in den erforderlichen Datenstrukturen speicherst.

1. Öffne die index.html-Datei in deinem Code-Editor.
2. Locate the // TODO section in the JavaScript code.
3. Erstelle zwei Objekte, um die wöchentlichen und monatlichen Daten zu speichern:

// TODO
let weekData = {
  x: [],
  y: []
};

let monthData = {
  x: [],
  y: []
};

4. Implementiere die mySetOption()-Funktion, um die Optionen des Diagramms basierend auf den an ihr übergebenen Daten zu aktualisieren.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  myChart.setOption(option);
}

5. Verwende die axios.get()-Methode, um die Daten aus der data.json-Datei abzurufen. Die Antwort auf den API-Aufruf wird die Daten in der res.data.data-Eigenschaft enthalten.

axios.get("./data.json").then((res) => {
  const data = res.data.data;

  // Verarbeite die Daten hier
});

6. Innerhalb der Callback-Funktion der then()-Methode durchlaufe das data-Objekt und verarbeite die Lernzeitdaten für jeden Tag. Berechne die Gesamtlernzeit für jede Woche und jeden Monat und speichere die Ergebnisse in den weekData- und monthData-Objekten respective.

for (const key in data) {
  let weekCount = (monthCount = 0),
    weekNum = 1;

  for (let i = 0; i < data[key].length; i++) {
    weekCount += data[key][i];
    monthCount += data[key][i];

    if (
      (i + 1) % 7 === 0 ||
      (data[key].length - i <= 7 && i === data[key].length - 1)
    ) {
      weekData.x.push(`Week ${weekNum++} (${key})`);
      weekData.y.push(weekCount);
      weekCount = 0;
    }
  }
  monthData.x.push(key);
  monthData.y.push(monthCount);
}

7. Nachdem die Daten verarbeitet wurden, rufe die mySetOption()-Funktion auf und übergebe das weekData-Objekt, um die wöchentlichen Statistiken standardmäßig anzuzeigen.

mySetOption(weekData);

8. Der Effekt des Codes nach diesem Verarbeitungs-Schritt ist wie folgt:

// TODO
let weekData = {
    x: [],
    y: []
  },
  monthData = {
    x: [],
    y: []
  };

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // reset
  myChart.setOption(option);
}

axios.get("./data.json").then((res) => {
  const data = res.data.data;

  for (const key in data) {
    let weekCount = (monthCount = 0),
      weekNum = 1;

    for (let i = 0; i < data[key].length; i++) {
      weekCount += data[key][i];
      monthCount += data[key][i];

      if (
        (i + 1) % 7 === 0 ||
        (data[key].length - i <= 7 && i === data[key].length - 1)
      ) {
        weekData.x.push(`Week ${weekNum++} (${key})`);
        weekData.y.push(weekCount);
        weekCount = 0;
      }
    }
    monthData.x.push(key);
    monthData.y.push(monthCount);
  }
  mySetOption(weekData);
});

Das Diagramm anzeigen

In diesem Schritt wirst du lernen, wie du die Anzeige von Diagrammen mithilfe der ECharts-Bibliothek umschaltest.

1. Öffne die index.html-Datei in deinem Code-Editor.
2. Locate the mySetOption section in the JavaScript code.
3. Füge nach der Funktion mySetOption Event-Listener für die Registerkarten (wöchentlich und monatlich) hinzu, um das Diagramm zu aktualisieren, wenn der Benutzer darauf klickt.

function mySetOption(data) {
  option.xAxis.data = data.x;
  option.series[0].data = data.y;
  // reset
  myChart.setOption(option);
}

document.querySelector(".tabs").addEventListener("click", function (e) {
  if (e.target.id === "week") {
    mySetOption(weekData);
  } else if (e.target.id === "month") {
    mySetOption(monthData);
  }
});

Mit diesen Schritten hast du das Projekt abgeschlossen. Das Diagramm wird jetzt die wöchentlichen und monatlichen Lernzeitstatistiken basierend auf den Daten anzeigen, die aus der data.json-Datei abgerufen wurden. Der endgültige Seiteneffekt ist wie folgt:

Zusammenfassung

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