Tablero de control de ventas en tiempo real con Echarts

Introducción

En este proyecto, aprenderás a crear un panel de control de ventas en tiempo real utilizando la biblioteca Echarts. El panel de control mostrará los datos de ventas y volumen en un formato visualmente atractivo y fácil de entender.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el proyecto y obtener los archivos necesarios
• Cómo completar la configuración del "eje y" en el archivo index.js
• Cómo asignar correctamente los valores de los datos del backend a las opciones de gráfico adecuadas en la función renderChart

🏆 Logros

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

• Representar datos en gráficos utilizando la biblioteca Echarts
• Estructurar y organizar tu código para un proyecto de visualización de datos
• Trabajar con la recuperación de datos asincrónica y actualizar el gráfico en tiempo real

Skills Graph

Establece 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:

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

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

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Completando la configuración del eje y

En este paso, aprenderás a completar la configuración del "eje y" en el archivo index.js.

1. Abre el archivo index.js.

2. Encuentra la configuración del eje y en el objeto option.

3. Actualiza la configuración del eje y para cumplir con los siguientes requisitos:

   • El primer elemento debe tener name como "ventas" y position en el lado izquierdo del gráfico.
   • El segundo elemento debe tener name como "volumen" y position en el lado derecho del gráfico.

Tu configuración actualizada del eje y debería verse así:

yAxis: [
  {
    type: "value",
    name: "ventas",
    position: "left"
  },
  {
    type: "value",
    name: "volumen",
    position: "right"
  }
],

Completando la función renderChart

En este paso, aprenderás a completar la función renderChart en el archivo index.js.

1. Abre el archivo index.js.
2. Encuentra la función renderChart.
3. Completa el código en la función renderChart para asignar correctamente los valores de saleObj y countObj al tiempo para el eje X, y las ventas y el volumen para el eje Y.

Tu función renderChart actualizada debería verse así:

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

  // Asigna los valores de `saleObj` y `countObj` a las opciones adecuadas
  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);
}

Después de completar estos pasos, tu proyecto de panel de control de ventas debería estar completamente funcional y mostrar correctamente los datos de ventas y volumen en tiempo real. 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.