Visualización de datos con Echarts y JSON

Introducción

En este proyecto, aprenderás a obtener datos de un archivo JSON, renderizar el contenido de proteínas de diferentes alimentos y crear un gráfico circular de Echarts para visualizar los datos. Este proyecto tiene como objetivo brindarte una experiencia práctica en el trabajo con la manipulación y visualización de datos utilizando JavaScript.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo obtener datos de un archivo JSON utilizando la API Fetch
• Cómo renderizar el contenido de proteínas de diferentes alimentos en la página web
• Cómo crear un gráfico circular de Echarts para visualizar los datos de contenido de proteínas

🏆 Logros

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

• Obtener datos de un archivo JSON y procesar los datos
• Renderizar dinámicamente elementos HTML basados en los datos obtenidos
• Utilizar la biblioteca Echarts para crear un gráfico circular interactivo
• Integrar la visualización de datos en una aplicación web

Establece la estructura del proyecto

En este paso, establecerá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
├── index.html
├── lib
└── mock
    └── data.json

Entre ellos:

• index.html es la página principal.
• css es la carpeta que almacena los estilos del proyecto.
• lib es la carpeta que almacena las dependencias del proyecto.
• mock/data.json es los datos JSON utilizados en la solicitud del proyecto.

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 y verás la página.

Obtener datos y renderizar el contenido de proteínas

En este paso, aprenderás a obtener datos del archivo JSON proporcionado y a renderizar el contenido de proteínas de diferentes alimentos.

1. Abre el archivo index.html en el directorio del proyecto.
2. Localiza el comentario TODO en el archivo index.html, que está dentro de la etiqueta <script>.
3. Dentro de la función fetchData, agrega el siguiente código para obtener los datos de la MockURL y renderizar el contenido de proteínas:

let dataList = ref([]);
async function fetchData() {
  // TODO: código que se agregará
  let data = await fetch(MockURL).then((res) => res.json());
  data.unshift({
    name: "header",
    icon: "none"
  });
  echartsInit(data);
  dataList.value = data.slice(1);
}

return {
  echartsInit,
  fetchData
};

4. En el hook onMounted, llama a la función fetchData para obtener los datos y renderizar el contenido de proteínas. Finalmente, devuelve dentro de return.

onMounted(() => {
  fetchData();
});
return {
  echartsInit,
  fetchData,
  dataList
};

5. Agrega el siguiente código debajo de TODO: código que se agregará para renderizar los datos obtenidos en HTML para mostrar los datos.

<div class="protein-item" v-for="data in dataList" :key="data.name">
  {{data.name}} {{data.value}}
</div>

6. Guarda el archivo index.html y actualiza la página. Ahora deberías ver el contenido de proteínas de diferentes alimentos mostrado en el elemento .protein-container.

El efecto final es el siguiente:

¡Felicitaciones! Has completado el proyecto "Food Protein Revealed". Has aprendido a obtener datos de un archivo JSON, a renderizar el contenido de proteínas y a crear un gráfico circular de Echarts para visualizar los datos.

Resumen

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