Temps passé avec votre téléphone

Introduction

Dans ce projet, vous allez apprendre à créer un graphique en ligne à l'aide de la bibliothèque ECharts. Le graphique affichera le nombre d'heures que l'utilisateur passe sur son téléphone chaque jour de la semaine.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer le projet et ouvrir les fichiers nécessaires
• Comment corriger une erreur dans la configuration d'ECharts
• Comment comprendre la configuration du graphique en ligne
• Comment personnaliser le graphique en modifiant la configuration

🏆 Réalisations

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

• Utiliser la bibliothèque ECharts pour créer un graphique en ligne
• Configurer le titre, les axes et les séries de données du graphique
• Personnaliser le graphique en modifiant la configuration

Configurer le projet

Dans cette étape, vous allez configurer le projet et ouvrir les fichiers dans l'éditeur.

1. Ouvrez l'éditeur à droite. Vous devriez voir deux fichiers - index.html et echarts.js.
2. Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
3. Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour la voir.

Corriger l'erreur dans le fichier index.html

Dans cette étape, vous allez corriger l'erreur dans le fichier index.html.

1. Localisez la section var option = {} dans le fichier index.html.
2. Il y a un bogue dans l'élément de configuration qui fait que les axes sont affichés incorrectement.
3. Mettez à jour l'objet option comme suit :

var option = {
  title: {
    text: "Heures passées à utiliser le téléphone mobile"
  },
  xAxis: {
    type: "category",
    data: [
      "Lundi",
      "Mardi",
      "Mercredi",
      "Jeudi",
      "Vendredi",
      "Samedi",
      "Dimanche"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
      type: "line"
    }
  ]
};

4. Comprenez le code ci-dessus :

• La propriété title définit le titre du graphique en ligne.
• La propriété xAxis configure l'axe des abscisses, qui est défini sur le type "category" et affiche les jours de la semaine.
• La propriété yAxis configure l'axe des ordonnées, qui est défini sur le type "value".
• La propriété series est la série où data est les données de temps pour chaque jour de la semaine pendant lequel le téléphone est utilisé, et type est le type de graphique sous forme d'un graphique en ligne.

5. Enregistrez le fichier et rechargez la page pour voir le graphique mis à jour. Le résultat final est le suivant :

Résumé

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