El Inmenso Mar del Aprendizaje

Introducción

En este proyecto, aprenderás a crear un gráfico de visualización de datos utilizando la biblioteca ECharts. El objetivo del proyecto es ayudar a Lucy, una usuaria de una plataforma de aprendizaje en línea, a visualizar mejor su tiempo de estudio diario.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo obtener datos de un archivo JSON y procesarlos para extraer la información necesaria.
• Cómo utilizar la biblioteca ECharts para crear un gráfico de barras que muestre las estadísticas de duración de estudio semanal y mensual.
• Cómo implementar interactividad para permitir al usuario cambiar entre las vistas semanal y mensual.
• Cómo redimensionar dinámicamente el gráfico cuando se redimensiona la ventana.

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Obtener datos de un archivo JSON y manipularlos para su visualización.
• Configurar y personalizar un gráfico de barras de ECharts para mostrar estadísticas de duración de estudio.
• Agregar interactividad al gráfico y manejar las interacciones del usuario.
• Asegurarse de que el gráfico siga siendo reactivo y se adapte al redimensionamiento de la ventana.

Skills Graph

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

En esta estructura:

• index.html es la página principal.
• js/echarts.min.js es el archivo de ECharts.
• js/axios.min.js es el archivo de axios.
• css/style.css es el archivo de estilo.
• data.json es el archivo de datos de duración de estudio.

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 y actualízala manualmente para ver la página.

Obtener los datos

En este paso, aprenderás a obtener los datos del archivo data.json y almacenarlos en las estructuras de datos necesarias.

1. Abre el archivo index.html en tu editor de código.
2. Localiza la sección // TODO en el código JavaScript.
3. Crea dos objetos para almacenar los datos semanales y mensuales:

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

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

4. Implementa la función mySetOption() para actualizar las opciones del gráfico según los datos que se le pasen.

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

5. Utiliza el método axios.get() para obtener los datos del archivo data.json. La respuesta de la llamada a la API contendrá los datos en la propiedad res.data.data.

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

  // Procesa los datos aquí
});

6. Dentro de la función de devolución de llamada del método then(), itera a través del objeto data y procesa los datos de duración de estudio de cada día. Calcula la duración total de estudio de cada semana y mes, y almacena los resultados en los objetos weekData y monthData respectivamente.

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. Después de procesar los datos, llama a la función mySetOption() y pasa el objeto weekData para mostrar las estadísticas semanales por defecto.

mySetOption(weekData);

8. El efecto del código después de este paso de procesamiento es el siguiente:

// 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);
});

Mostrar el gráfico

En este paso, aprenderás a cambiar la visualización de los gráficos utilizando la biblioteca ECharts.

1. Abre el archivo index.html en tu editor de código.
2. Localiza la sección mySetOption en el código JavaScript.
3. Agrega listeners de eventos para las pestañas (semanal y mensual) después de la función mySetOption para actualizar el gráfico cuando el usuario haga clic en ella.

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);
  }
});

Con estos pasos, has completado el proyecto. El gráfico ahora mostrará las estadísticas de duración de estudio semanal y mensual basadas en los datos obtenidos del archivo data.json. El efecto final de la página es el siguiente:

Resumen

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