Gráfico de Tendência Climática com Vue e Echarts

Introdução

Neste projeto, você aprenderá a criar um gráfico de tendências climáticas que exibe os dados de temperatura de uma cidade ao longo do ano. O gráfico permitirá que os usuários alternem entre os dados do mês atual e os dados dos próximos 7 dias, fornecendo uma visão abrangente das tendências climáticas.

👀 Pré-visualização

O efeito de alternância entre "O mês atual" e "Os próximos 7 dias" é mostrado na figura abaixo:

O efeito de alternância de mês é o seguinte:

🎯 Tarefas

Neste projeto, você aprenderá:

• Como buscar dados meteorológicos de um arquivo JSON usando Axios
• Como renderizar uma lista de meses e lidar com o evento de clique para alterar os dados exibidos
• Como implementar abas (tabs) para alternar entre os dados do mês atual e os dados dos próximos 7 dias
• Como inicializar e personalizar um gráfico Echarts para exibir os dados meteorológicos

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Buscar dados de um arquivo JSON usando Axios
• Criar uma interface de usuário responsiva e interativa com Vue.js
• Usar Echarts para criar um gráfico personalizado com recursos avançados
• Lidar com interações do usuário e atualizar o gráfico de acordo
• Aplicar seu conhecimento de desenvolvimento front-end, visualização de dados e design de experiência do usuário

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

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

Onde:

• css/style.css é o arquivo de estilo.
• js/axios.js é o arquivo do axios.
• js/vue.min.js é o arquivo vue2.x.
• js/echarts.min.js é o arquivo do echarts.
• js/weather.json são os dados meteorológicos necessários para a requisição.
• index.html é a página principal.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Obter Dados Climáticos

Nesta etapa, você aprenderá como buscar os dados meteorológicos do arquivo JSON fornecido.

1. No arquivo index.html, localize a tag <script> na parte inferior do arquivo.
2. Dentro da tag <script>, crie uma nova instância Vue usando new Vue().
3. Na opção data da instância Vue, adicione os seguintes atributos e atribua valores iniciais.

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

4. No gancho methods da instância Vue, localize this.chartOptions na função initChart e altere o data em xAxis e series para as variáveis correspondentes, conforme segue:

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

5. No gancho mounted da instância Vue, use o método axios.get() para buscar os dados meteorológicos do arquivo ./js/weather.json. O código modificado é o seguinte:

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 busca os dados meteorológicos do arquivo JSON, armazena-os na propriedade data e, em seguida, define as propriedades yData e xData iniciais para o gráfico. Finalmente, ele chama o método initChart() para renderizar o gráfico.

Renderizar a Lista de Meses

Nesta etapa, você aprenderá como renderizar a lista de meses e lidar com o evento de clique para alterar os dados exibidos.

1. No arquivo index.html, na opção data da instância Vue, adicione os seguintes atributos e atribua valores iniciais.

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

2. No elemento <ul> com a class="month", use uma diretiva v-for para renderizar a lista de meses. Adicione um manipulador de eventos de clique aos elementos <li> para chamar o método changeMonth() quando um mês for clicado.

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

3. Na seção methods da instância Vue, adicione o método changeMonth(), que atualiza as propriedades monthName, monthNumber, yData e xData com base no mês selecionado e, em seguida, chama o método initChart() para renderizar novamente o 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 a Aba do Mês Atual e dos Próximos 7 Dias

Nesta etapa, você aprenderá como implementar as abas que permitem ao usuário alternar entre os dados do mês atual e os dados dos próximos 7 dias.

1. No arquivo index.html, na seção data da instância Vue, adicione as seguintes propriedades:

data: {
  type: 1, // Status dos dados para os próximos 7 dias e o mês atual
  nowMonth: new Date().getMonth(),
},

2. No <div> com o id="currentMonth", adicione uma renderização condicional com base nas propriedades monthNumber e nowMonth. Isso exibirá apenas a aba para o mês atual.

<div id="currentMonth" v-if="monthNumber===nowMonth">
  <div class="title">
    <h3>{{typeTitle}}</h3>
    <div class="type" @click="clickType($event)">
      <span id="seven" :class="{'active':!type}">The next 7 days</span>
      <span id="current" :class="{'active':type}">The current month</span>
    </div>
  </div>
</div>

3. Na seção methods da instância Vue, adicione o método clickType(), que atualiza as propriedades type, typeTitle, yData e xData com base na aba clicada e, em seguida, chama o método initChart() para renderizar novamente o gráfico.

clickType(e) {
  switch (e.target.id) {
    case "seven":
      this.type = 0;
      this.typeTitle = "The next 7 days";
      [this.xData, this.yData] = this.getSevenData();
      break;
    case "current":
      this.type = 1;
      this.typeTitle = "The current month";
      this.yData = this.data[this.monthNumber][this.monthName];
      this.xData = [...this.yData.map((e, i) => i + 1)];
      break;
  }
  this.initChart();
},

4. Adicione o método getSevenData(), que calcula os rótulos do eixo x e os dados do eixo y para os próximos 7 dias.

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 os rótulos do eixo x e os dados do eixo y para os próximos 7 dias, levando em consideração a transição entre os meses.

5. Salve o arquivo e recarregue a página para ver o gráfico atualizado. A figura a seguir mostra o efeito de alternar entre "the current month" e "the next 7 days" (obtido via a função de tempo, aqui assumindo abril):

O efeito de troca de mês é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.