Créer des graphiques à barres interactifs avec ECharts | Visualisation de données

Introduction

Dans ce projet, vous allez apprendre à créer un graphique à barres à l'aide de la bibliothèque JavaScript ECharts pour afficher les statistiques des performances des étudiants. ECharts est un puissant outil de visualisation de données qui peut vous aider à créer des graphiques interactifs et visuellement attrayants pour présenter vos données.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment corriger une erreur dans le code initial pour afficher le graphique correctement
Comment modifier les paramètres de l'axe des x et de l'axe des y pour vous assurer que le graphique est affiché dans la bonne direction
Comment ajuster les données dans la série pour qu'elles correspondent à l'ordre des étiquettes de l'axe des x

🏆 Réalisations

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

Initialiser une instance ECharts et configurer les options du graphique
Définir les propriétés de l'axe des x et de l'axe des y pour contrôler l'apparence du graphique
Mettre à jour les données dans la série pour qu'elles correspondent à la visualisation souhaitée

Configurer la structure du projet

Dans cette étape, vous allez configurer la structure du projet et préparer les fichiers et dossiers nécessaires.

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

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

Où :

index.html est la page principale.
js/echarts.js est le fichier ECharts.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle, actualisez manuellement la page et vous constaterez qu'elle est vide. À ce moment-là, ouvrez la console et vous verrez le message d'erreur suivant :

Corriger l'erreur

Dans cette étape, vous allez apprendre à corriger l'erreur dans le projet pour que le graphique puisse être affiché.

Ouvrez le fichier index.html dans le projet fourni.
On a constaté que le code dans la balise script avait un axe des x indéfini. Dans le graphique echars, à la fois l'axe des x et l'axe des y doivent être définis, que les données existent ou non. Par conséquent, nous avons apporté le changement suivant au code sous var option = {...}; dans TODO comme suit :

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

Cela corrigera l'erreur et permettra d'afficher le graphique.