El trabajo duro vale la pena

Introducción

En este proyecto, aprenderás a crear un gráfico estadístico de los rendimientos agrícolas de una ciudad en los últimos cinco años utilizando ECharts. El objetivo del proyecto es demostrar cómo se pueden analizar problemas prácticos a través de las estadísticas de los rendimientos agrícolas, que afectan directamente a la vida cotidiana de las personas.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el entorno del proyecto y entender los archivos proporcionados
• Cómo obtener los datos de un archivo JSON y procesarlos para actualizar la visualización de ECharts
• Cómo personalizar la apariencia y el diseño del gráfico de líneas y el gráfico circular

🏆 Logros

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

• Utilizar la biblioteca Axios para obtener datos de un archivo JSON
• Manipular el objeto de opciones de ECharts para actualizar la visualización
• Personalizar los gráficos ajustando el título, el diseño y otras propiedades

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:

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

Donde:

• 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.
• data.json es los datos de producción de granos en toneladas para el año correspondiente.

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 actualiza manualmente la página para ver el siguiente efecto en tu navegador:

Obtén los datos

En este paso, completarás la solicitud de datos y mostrarás correctamente los datos de rendimiento agrícola en el gráfico de líneas y el gráfico circular.

1. En el archivo index.html, localiza la sección // TODO.
2. Utiliza el método axios.get() para obtener los datos del archivo data.json.

axios.get("./data.json").then((res) => {
  let data = res.data.data;
  // TODO: Procesa los datos y actualiza el objeto de opciones
});

3. Dentro del callback .then(), procesa los datos del archivo data.json y actualiza el objeto option en consecuencia.
   • Crea un objeto dataObj para almacenar los datos de cada tipo de cultivo.
   • Crea un array sourceTip para almacenar las etiquetas de los datos.
   • Itera a través de los datos y llena los arrays dataObj y sourceTip.
   • Crea un nuevo array newSource y llénalo con los datos de dataObj y sourceTip.
   • Actualiza la option.dataset.source con el array newSource.
   • Llama a myChart.setOption(option) para actualizar el gráfico con los nuevos datos.

// TODO
let dataObj = {
  wheat: ["wheat"],
  soybean: ["soybean"],
  potato: ["potato"],
  corn: ["corn"]
};
let sourceTip = ["all"];

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

  for (const key1 in data) {
    sourceTip.push(key1);
    for (const key2 in data[key1]) {
      dataObj[key2].push(data[key1][key2]);
    }
  }

  let newSource = [];
  newSource.push(sourceTip);
  for (const key in dataObj) {
    newSource.push(dataObj[key]);
  }

  option.dataset.source = newSource;
  myChart.setOption(option);
});

4. Guarda el archivo index.html y actualiza la página. Ahora deberías ver el gráfico de líneas y el gráfico circular actualizados con los datos correctos.

Resumen

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