График динамики погоды с использованием Vue и Echarts

Введение

В этом проекте вы научитесь создавать график динамики погоды, отображающий температурные данные для города в течение года. График позволит пользователям переключаться между данными текущего месяца и данными на следующие 7 дней, обеспечивая полное представление о динамике погоды.

👀 Предварительный просмотр

Эффект переключения между "Текущим месяцем" и "Следующими 7 днями" показан на рисунке ниже:

Эффект переключения месяцев выглядит следующим образом:

🎯 Задачи

В этом проекте вы научитесь:

• Получать данные о погоде из JSON-файла с использованием Axios
• Отображать список месяцев и обрабатывать событие нажатия для изменения отображаемых данных
• Реализовывать табы для переключения между данными текущего месяца и данными на следующие 7 дней
• Инициализировать и настроить график Echarts для отображения данных о погоде

🏆 Достижения

После завершения этого проекта вы сможете:

• Получать данные из JSON-файла с использованием Axios
• Создавать отзывчивый и интерактивный пользовательский интерфейс с использованием Vue.js
• Использовать Echarts для создания настраиваемого графика с продвинутыми функциями
• Обрабатывать взаимодействия пользователя и обновлять график в соответствии с ними
• Применять свои знания в области фронтенд-разработки, визуализации данных и дизайна пользовательского опыта

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов выглядит следующим образом:

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

где:

• css/style.css - файл стилей.
• js/axios.js - файл axios.
• js/vue.min.js - файл vue2.x.
• js/echarts.min.js - файл echarts.
• js/weather.json - файл с данными о погоде, необходимыми для запроса.
• index.html - главная страница.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Получение данных о погоде

В этом шаге вы научитесь получать данные о погоде из предоставленного JSON-файла.

1. В файле index.html найдите тег <script> внизу файла.
2. Внутри тега <script> создайте новый экземпляр Vue с использованием new Vue().
3. В опции data экземпляра Vue добавьте следующие атрибуты и назначьте им начальные значения.

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

4. В хуке methods экземпляра Vue найдите this.chartOptions в функции initChart и измените data в xAxis и series на соответствующие переменные, как показано ниже:

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

5. В хуке mounted экземпляра Vue используйте метод axios.get() для получения данных о погоде из файла ./js/weather.json. Модифицированный код выглядит следующим образом:

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();
  });
},

Этот код получает данные о погоде из JSON-файла, сохраняет их в свойстве data, а затем назначает начальные свойства yData и xData для графика. Наконец, он вызывает метод initChart(), чтобы отобразить график.

Отобразить список месяцев

В этом шаге вы научитесь отображать список месяцев и обрабатывать событие нажатия для изменения отображаемых данных.

1. В файле index.html в опции data экземпляра Vue добавьте следующие атрибуты и назначьте им начальные значения.

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

2. В элементе <ul> с классом class="month" используйте директиву v-for для отображения списка месяцев. Добавьте обработчик события нажатия для элементов <li>, чтобы вызывать метод changeMonth() при нажатии на месяц.

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

3. В разделе methods экземпляра Vue добавьте метод changeMonth(), который обновляет свойства monthName, monthNumber, yData и xData в зависимости от выбранного месяца, а затем вызывает метод initChart() для повторного отображения графика.

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();
},

Реализовать вкладки текущего месяца и следующих 7 дней

В этом шаге вы научитесь реализовывать табы, которые позволят пользователю переключаться между данными текущего месяца и данными на следующие 7 дней.

1. В файле index.html в разделе data экземпляра Vue добавьте следующие свойства:

data: {
  type: 1, // Статус данных для следующих 7 дней и текущего месяца
  nowMonth: new Date().getMonth(),
},

2. В элементе <div> с id="currentMonth" добавьте условное отображение на основе свойств monthNumber и nowMonth. Это будет отображать только таб для текущего месяца.

<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}">Следующие 7 дней</span>
      <span id="current" :class="{'active':type}">Текущий месяц</span>
    </div>
  </div>
</div>

3. В разделе methods экземпляра Vue добавьте метод clickType(), который обновляет свойства type, typeTitle, yData и xData в зависимости от нажатого таба, а затем вызывает метод initChart() для повторного отображения графика.

clickType(e) {
  switch (e.target.id) {
    case "seven":
      this.type = 0;
      this.typeTitle = "Следующие 7 дней";
      [this.xData, this.yData] = this.getSevenData();
      break;
    case "current":
      this.type = 1;
      this.typeTitle = "Текущий месяц";
      this.yData = this.data[this.monthNumber][this.monthName];
      this.xData = [...this.yData.map((e, i) => i + 1)];
      break;
  }
  this.initChart();
},

4. Добавьте метод getSevenData(), который вычисляет метки оси x и данные оси y для следующих 7 дней.

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];
},

Этот метод вычисляет метки оси x и данные оси y для следующих 7 дней, учитывая переход между месяцами.

5. Сохраните файл и перезагрузите страницу, чтобы увидеть обновленный график. На следующем рисунке показан эффект переключения между "текущим месяцем" и "следующими 7 днями" (полученный с помощью функции времени, здесь предполагается апрель):

Эффект переключения месяцев выглядит следующим образом:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.