Gráfico de tendencias climáticas con Vue y Echarts

Introducción

En este proyecto, aprenderás a crear un gráfico de tendencias climáticas que muestre los datos de temperatura de una ciudad durante todo el año. El gráfico permitirá a los usuarios alternar entre los datos del mes actual y los datos de los próximos 7 días, brindando una visión integral de las tendencias climáticas.

👀 Vista previa

El efecto de alternancia entre "El mes actual" y "Los próximos 7 días" se muestra en la figura siguiente:

El efecto de cambio de mes es el siguiente:

🎯 Tareas

En este proyecto, aprenderás:

• Cómo obtener datos climáticos de un archivo JSON utilizando Axios
• Cómo renderizar una lista de meses y manejar el evento de clic para cambiar los datos mostrados
• Cómo implementar pestañas para alternar entre los datos del mes actual y los datos de los próximos 7 días
• Cómo inicializar y personalizar un gráfico Echarts para mostrar los datos climáticos

🏆 Logros

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

• Obtener datos de un archivo JSON utilizando Axios
• Crear una interfaz de usuario reactiva e interactiva con Vue.js
• Utilizar Echarts para crear un gráfico personalizado con características avanzadas
• Manejar las interacciones del usuario y actualizar el gráfico en consecuencia
• Aplicar tus conocimientos de desarrollo front-end, visualización de datos y diseño de experiencia de usuario

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
├── js
│   ├── axios.js
│   ├── echarts.min.js
│   ├── vue.min.js
│   └── weather.json
└── index.html

Donde:

• css/style.css es el archivo de estilo.
• js/axios.js es el archivo de axios.
• js/vue.min.js es el archivo de vue2.x.
• js/echarts.min.js es el archivo de echarts.
• js/weather.json es los datos climáticos necesarios para la solicitud.
• index.html es la página principal.

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

Obtener datos climáticos

En este paso, aprenderás a obtener los datos climáticos del archivo JSON proporcionado.

1. En el archivo index.html, localiza la etiqueta <script> al final del archivo.
2. Dentro de la etiqueta <script>, crea una nueva instancia de Vue usando new Vue().
3. En la opción data de la instancia de Vue, agrega los siguientes atributos y asigna valores iniciales.

data: {
  //...
  data: [],
  yData: [],
  xData: [],
},

4. En el hook methods de la instancia de Vue, localiza this.chartOptions en la función initChart y cambia el data en xAxis y series a las variables correspondientes de la siguiente manera:

this.chartOptions = {
  //...
  xAxis: [
    {
      //...
      data: this.xData
    }
  ],
  //...
  series: [
    {
      //...
      data: this.yData
    }
  ]
};

5. En el hook mounted de la instancia de Vue, utiliza el método axios.get() para obtener los datos climáticos del archivo ./js/weather.json. El código modificado es el siguiente:

mounted: async function () {
  const res = await axios.get("./js/weather.json");
  this.data = res.data;
  this.yData = res.data[0]["January"];
  this.xData = [...this.yData.map((e, i) => i + 1)];
  this.$nextTick(() => {
    this.initChart();
  });
},

Este código obtiene los datos climáticos del archivo JSON, los almacena en la propiedad data y luego establece las propiedades iniciales yData y xData para el gráfico. Finalmente, llama al método initChart() para renderizar el gráfico.

Renderizar la lista de meses

En este paso, aprenderás a renderizar la lista de meses y manejar el evento de clic para cambiar los datos mostrados.

1. En el archivo index.html, en la opción data de la instancia de Vue, agrega los siguientes atributos y asigna valores iniciales.

data: {
  //...
  monthName: "Enero",
  monthNumber: 0,
},

2. En el elemento <ul> con la clase class="month", utiliza la directiva v-for para renderizar la lista de meses. Agrega un manejador de eventos de clic a los elementos <li> para llamar al método changeMonth() cuando se hace clic en un mes.

<ul>
  <li
    v-for="(item,key,index) in monthList"
    :class="[monthName===key?'activo':'']"
    @click="changeMonth(key,index)"
  >
    {{item}}
  </li>
</ul>

3. En la sección methods de la instancia de Vue, agrega el método changeMonth(), que actualiza las propiedades monthName, monthNumber, yData y xData según el mes seleccionado, y luego llama al método initChart() para volver a renderizar el gráfico.

changeMonth(month, index) {
  this.monthName = month;
  this.monthNumber = index;

  this.yData = this.data[index][month];
  this.xData = [...this.yData.map((e, i) => i + 1)];

  if (index === this.nowMonth) {
    this.type = 1;
  }
  this.initChart();
},

Implementar las pestañas del mes actual y los próximos 7 días

En este paso, aprenderás a implementar las pestañas que permiten a los usuarios alternar entre los datos del mes actual y los datos de los próximos 7 días.

1. En el archivo index.html, en la sección data de la instancia de Vue, agrega las siguientes propiedades:

data: {
  type: 1, // Estado de los datos de los próximos 7 días y del mes actual
  nowMonth: new Date().getMonth(),
},

2. En el <div> con el id="currentMonth", agrega un renderizado condicional basado en las propiedades monthNumber y nowMonth. Esto solo mostrará la pestaña del mes actual.

<div id="currentMonth" v-if="monthNumber===nowMonth">
  <div class="title">
    <h3>{{typeTitle}}</h3>
    <div class="type" @click="clickType($event)">
      <span id="seven" :class="{'activo':!type}">Los próximos 7 días</span>
      <span id="current" :class="{'activo':type}">El mes actual</span>
    </div>
  </div>
</div>

3. En la sección methods de la instancia de Vue, agrega el método clickType(), que actualiza las propiedades type, typeTitle, yData y xData según la pestaña clicada, y luego llama al método initChart() para volver a renderizar el gráfico.

clickType(e) {
  switch (e.target.id) {
    case "seven":
      this.type = 0;
      this.typeTitle = "Los próximos 7 días";
      [this.xData, this.yData] = this.getSevenData();
      break;
    case "current":
      this.type = 1;
      this.typeTitle = "El mes actual";
      this.yData = this.data[this.monthNumber][this.monthName];
      this.xData = [...this.yData.map((e, i) => i + 1)];
      break;
  }
  this.initChart();
},

4. Agrega el método getSevenData(), que calcula las etiquetas del eje x y los datos del eje y para los próximos 7 días.

getSevenData() {
  let newXdata = [],
    newYdata = [];
  for (let i = 0; i < 7; i++) {
    let now = new Date();
    let time = now.getTime() + 1000 * 60 * 60 * 24 * i;
    now.setTime(time);
    newXdata.push(`${now.getMonth() + 1}/${now.getDate()}`);

    if (this.monthNumber === now.getMonth()) {
      newYdata.push(this.yData[now.getDate() - 1]);
    } else {
      let nextMonth = this.data[now.getMonth()];
      for (const key in nextMonth) {
        newYdata.push(nextMonth[key][now.getDate() - 1]);
      }
    }
  }
  return [newXdata, newYdata];
},

Este método calcula las etiquetas del eje x y los datos del eje y para los próximos 7 días, teniendo en cuenta la transición entre meses.

5. Guarda el archivo y recarga la página para ver el gráfico actualizado. La siguiente figura muestra el efecto de alternancia entre "el mes actual" y "los próximos 7 días" (obtenido a través de la función de tiempo, aquí suponiendo abril):

El efecto de cambio de mes es el siguiente:

Resumen

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