使用Vue和Echarts实现天气趋势图

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何创建一个天气趋势图表,该图表展示一个城市一整年的温度数据。该图表将允许用户在当月数据和接下来7天的数据之间切换,从而提供天气趋势的全面视图。

👀 预览

“当月”和“接下来7天”的切换效果如下图所示:

图片描述

月份切换效果如下:

图片描述

🎯 任务

在这个项目中,你将学习:

  • 如何使用Axios从JSON文件中获取天气数据
  • 如何渲染月份列表并处理点击事件以更改显示的数据
  • 如何实现标签以在当月数据和接下来7天的数据之间切换
  • 如何初始化和自定义Echarts图表以显示天气数据

🏆 成果

完成这个项目后,你将能够:

  • 使用Axios从JSON文件中获取数据
  • 使用Vue.js创建一个响应式且交互式的用户界面
  • 使用Echarts创建一个具有高级功能的自定义图表
  • 处理用户交互并相应地更新图表
  • 应用你在前端开发、数据可视化和用户体验设计方面的知识

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") subgraph Lab Skills javascript/cond_stmts -.-> lab-445650{{"`使用Vue和Echarts实现天气趋势图`"}} javascript/array_methods -.-> lab-445650{{"`使用Vue和Echarts实现天气趋势图`"}} javascript/async_prog -.-> lab-445650{{"`使用Vue和Echarts实现天气趋势图`"}} javascript/dom_select -.-> lab-445650{{"`使用Vue和Echarts实现天气趋势图`"}} javascript/dom_manip -.-> lab-445650{{"`使用Vue和Echarts实现天气趋势图`"}} javascript/event_handle -.-> lab-445650{{"`使用Vue和Echarts实现天气趋势图`"}} javascript/http_req -.-> lab-445650{{"`使用Vue和Echarts实现天气趋势图`"}} end

设置项目结构

在这一步中,你将设置项目文件和结构。按照以下步骤完成此步骤:

打开项目文件夹。目录结构如下:

├── 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 是主页。

点击WebIDE右下角的“Go Live”按钮来运行项目。

接下来,在VM顶部打开“Web 8080”并手动刷新,你将看到页面。

图片描述

获取天气数据

在这一步中,你将学习如何从提供的JSON文件中获取天气数据。

  1. index.html 文件中,找到文件底部的 <script> 标签。
  2. <script> 标签内,使用 new Vue() 创建一个新的Vue实例。
  3. 在Vue实例的 data 选项中,添加以下属性并赋予初始值。
data: {
  //...
  data: [],
  yData: [],
  xData: [],
},
  1. 在Vue实例的 methods 钩子中,在 initChart 函数里找到 this.chartOptions,并将x轴和系列中的 data 更改为相应的变量,如下所示:
this.chartOptions = {
  //...
  xAxis: [
    {
      //...
      data: this.xData
    }
  ],
  //...
  series: [
    {
      //...
      data: this.yData
    }
  ]
};
  1. 在Vue实例的 mounted 钩子中,使用 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 属性中,然后为图表设置初始的 yDataxData 属性。最后,它调用 initChart() 方法来渲染图表。

渲染月份列表

在这一步中,你将学习如何渲染月份列表并处理点击事件以更改显示的数据。

  1. index.html 文件中,在Vue实例的 data 选项中,添加以下属性并赋予初始值。
data: {
  //...
  monthName: "January",
  monthNumber: 0,
},
  1. class="month"<ul> 元素中,使用 v-for 指令来渲染月份列表。为 <li> 元素添加一个点击事件处理程序,以便在点击某个月份时调用 changeMonth() 方法。
<ul>
  <li
    v-for="(item,key,index) in monthList"
    :class="[monthName===key?'active':'']"
    @click="changeMonth(key,index)"
  >
    {{item}}
  </li>
</ul>
  1. 在Vue实例的 methods 部分,添加 changeMonth() 方法,该方法根据所选月份更新 monthNamemonthNumberyDataxData 属性,然后调用 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 文件中,在Vue实例的 data 部分,添加以下属性:
data: {
  type: 1, // 接下来7天和当月的数据状态
  nowMonth: new Date().getMonth(),
},
  1. id="currentMonth"<div> 中,根据 monthNumbernowMonth 属性添加条件渲染。这将只显示当月的标签页。
<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>
  1. 在Vue实例的 methods 部分,添加 clickType() 方法,该方法根据点击的标签更新 typetypeTitleyDataxData 属性,然后调用 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();
},
  1. 添加 getSevenData() 方法,该方法计算接下来7天的x轴标签和y轴数据。
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];
},

此方法计算接下来7天的x轴标签和y轴数据,同时考虑到月份之间的过渡。

  1. 保存文件并重新加载页面以查看更新后的图表。下图显示了在“当月”和“接下来7天”之间切换的效果(通过时间函数获取,这里假设是四月):
图片描述

月份切换效果如下:

图片描述
✨ 查看解决方案并练习

总结

恭喜!你已完成此项目。你可以在LabEx中练习更多实验以提升技能。

您可能感兴趣的其他 JavaScript 教程