Tableau de bord de ventes en temps réel avec Echarts

Introduction

Dans ce projet, vous allez apprendre à créer un tableau de bord de ventes en temps réel à l'aide de la bibliothèque Echarts. Le tableau de bord affichera les données de ventes et de volume sous une forme visuellement attrayante et facile à comprendre.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer le projet et obtenir les fichiers nécessaires
• Comment compléter la configuration de l'axe des ordonnées (yAxis) dans le fichier index.js
• Comment assigner correctement les valeurs des données du backend aux options de graphique appropriées dans la fonction renderChart

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Rendre les données en graphiques à l'aide de la bibliothèque Echarts
• Structurer et organiser votre code pour un projet de visualisation de données
• Travailler avec la récupération asynchrone de données et mettre à jour le graphique en temps réel

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

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

Cliquez sur le bouton Démarrer en direct dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour la voir.

Compléter la configuration de l'axe des ordonnées

Dans cette étape, vous allez apprendre à compléter la configuration de l'axe des ordonnées (yAxis) dans le fichier index.js.

1. Ouvrez le fichier index.js.
2. Trouvez la configuration de l'axe des ordonnées (yAxis) dans l'objet option.
3. Mettez à jour la configuration de l'axe des ordonnées (yAxis) pour répondre aux exigences suivantes :
   • Le premier élément devrait avoir name égal à "ventes" et position sur le côté gauche du graphique.
   • Le second élément devrait avoir name égal à "volume" et position sur le côté droit du graphique.

Votre configuration de l'axe des ordonnées (yAxis) mise à jour devrait ressembler à ceci :

yAxis: [
  {
    type: "value",
    name: "ventes",
    position: "left"
  },
  {
    type: "value",
    name: "volume",
    position: "right"
  }
],

Compléter la fonction renderChart

Dans cette étape, vous allez apprendre à compléter la fonction renderChart dans le fichier index.js.

1. Ouvrez le fichier index.js.
2. Trouvez la fonction renderChart.
3. Complétez le code dans la fonction renderChart pour assigner correctement les valeurs de saleObj et countObj au temps pour l'axe des abscisses, et les ventes et le volume pour l'axe des ordonnées.

Votre fonction renderChart mise à jour devrait ressembler à ceci :

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

  // Assign the values from `saleObj` and `countObj` to the appropriate options
  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);
}

Après avoir effectué ces étapes, votre projet de tableau de bord de ventes devrait être entièrement fonctionnel et afficher correctement les données de ventes et de volume en temps réel. L'effet final de la page est le suivant :

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.