Crear gráficos de barras interactivos con ECharts

Introducción

En este proyecto, aprenderás a crear un gráfico de barras utilizando la biblioteca JavaScript ECharts para mostrar estadísticas de rendimiento de estudiantes. ECharts es una herramienta poderosa de visualización de datos que puede ayudarte a crear gráficos interactivos y visualmente atractivos para presentar tus datos.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo corregir un error en el código inicial para mostrar el gráfico correctamente
• Cómo modificar la configuración de los ejes x e y para asegurar que el gráfico se muestre en la dirección correcta
• Cómo ajustar los datos en la serie para que coincidan con el orden de las etiquetas del eje x

🏆 Logros

Después de completar este proyecto, podrás:

• Inicializar una instancia de ECharts y configurar las opciones del gráfico
• Definir las propiedades de los ejes x e y para controlar la apariencia del gráfico
• Actualizar los datos en la serie para que coincidan con la visualización deseada

Establece la estructura del proyecto

En este paso, establecerás la estructura del proyecto y prepararás los archivos y carpetas necesarios.

Abre la carpeta del proyecto en tu editor de código. La estructura del directorio es la siguiente:

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

Donde:

• index.html es la página principal.
• js/echarts.js es el archivo de ECharts.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM, actualiza manualmente la página y verás que la página está en blanco. En este momento, abre la consola y verás el siguiente mensaje de error:

Corrige el error

En este paso, aprenderás a corregir el error en el proyecto para que se pueda mostrar el gráfico.

1. Abre el archivo index.html en el proyecto proporcionado.
2. Se encontró que el código en la etiqueta de script tenía un eje x indefinido. En el gráfico echars, tanto el eje x como el eje y deben definirse independientemente de si hay datos o no. Por lo tanto, hicimos el siguiente cambio al código debajo de var option = {...}; dentro de TODO de la siguiente manera:

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

Esto corregirá el error y permitirá que se muestre el gráfico.

4. Guarda los cambios y recarga la página para ver el gráfico.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.