天气趋势

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-05

16.天气趋势2023-06-05

17.阅读吧2023-06-0518.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

天气趋势

任务

做一个可视化的天气温度变化的图标
使用Echarts进行制作
按照月份进行显示当前月份的所有温度
当点击到当前月份的时，出现两个按钮显示本月和未来七天的按钮

分类 ：ECharts

关键点

1. 使用axios请求数据保存到data中
   1. axios中最常用的就是get与psot，axios是基于promise的异步操作，所以是可以是使用then,catch方法来处理结果的，在本题里面就是一个简单的请求
   2. axios.get(地址)
      .then(res=>{当请求成功，返回的结果在此处操作})
      .catch(err=>{执行失败的操作})
      .finally(()=>{成功或失败都将执行的操作})
   3. 数据请求一般是放在生命周期mounted中
2. ECharts中的option配置项
   1. 定向到X轴的数据变化，在进行指定到data中的数据关注是.还是[]去定位
   2. 定向到series[0].data的数据的时候，不要出错，这个地方很容易出错
3. v-指令
   1. 显示隐藏v-if,v-show
   2. v-bind绑定样式
   3. @click点击事件
4. 主要思想
   1. 将传回的数据修改成键值对的形式，方便后期查找
   2. 未来七天的数据，可以使用当前月份获取到key，然后在进行push到新建的数组中，如果不是在同一个月份中，可以将月份+1再重新获取key，再次push即可
   3. 每次修改了配置项之后一定要触发this.chart.setOption(this.chartOptions);该方法

代码实现 && 完整的代码

1. 完整code

   <ul>
       <!-- TODO：待补充代码 在下面的 li 标签中完成 12个月份 (即 monthList) 的渲染  -->
       <li v-for="item,index in monthList" @click="setCurrentMonth(item,index)" :class="{'active':item == currentMonth}">
       {{item}}
       </li>
   </ul>
   </div>
   <div class="chart">
   <!-- TODO：待补充代码  -->
   <!-- currentMonth  未来七天和本月 tab 切换，只有当前月才显示 -->
   <div id="currentMonth" v-show="isShow">
       <div class="title">
       <h3>{{typeTitle}}</h3>
           <div class="type">
               <span id="seven" @click="changeStyle('未来7天天气')" :class="{active:typeTitle=='未来7天天气'}">未来7天</span>
               <span id="current" @click="changeStyle('本月天气')" :class="{active:typeTitle=='本月天气'}" >本月</span >
           </div>
       </div>
   </div>
   <div id="chart"></div>    
   <script>
   // TODO：待补充代码
   var vm = new Vue({
       el: "#app",
       data: {
       chart: null, // 图表
       chartOptions: null, // 图表配置项
       typeTitle: "本月天气",
       monthList: {
           January: "1月",
           February: "2月",
           March: "3月",
           April: "4月",
           May: "5月",
           June: "6月",
           July: "7月",
           August: "8月",
           September: "9月",
           October: "10月",
           November: "11月",
           December: "12月",
       },
       currentMonth: "1月",
       dataList: {},
       date: new Date(),
       isShow: false,
       },
       mounted: function () {
       // 初始化 echarts
       this.$nextTick(() => {
           this.initChart();
       });
       axios.get("./js/weather.json").then((res) => {
           // this.dataList = res.data;
           for (let i = 0; i < res.data.length; i++) {
           const element = res.data[i];
           this.dataList[Object.keys(element)[0]] = Object.values(element)[0];
           }
           this.setCurrentMonth(this.currentMonth, "January");
       });
       },
       methods: {
       initChart() {
           // 初始化图表
           this.chart = echarts.init(document.getElementById("chart"));
           // 配置项 去网站上看，这个地方就不写了会导致文档太长难以观看
           this.chartOptions = {}; 
           // 调用此方法设置 echarts 数据
           this.chart.setOption(this.chartOptions);
       },
       setCurrentMonth(data, index) {
           this.currentMonth = data;
           let len = this.dataList[index].length;
           let xdata = [];
           for (let i = 1; i <= len; i++) xdata.push(i);
           let sdata = this.dataList[index];
   
           this.chartOptions.xAxis[0].data = xdata;
           this.chartOptions.series[0].data = sdata;
           this.chart.setOption(this.chartOptions);
           this.isShow = data == this.date.getMonth() + 1 + "月";
       },
       changeStyle(data) {
           this.typeTitle = data;
           let aim;
           for (const key in this.monthList) {
           if (this.monthList[key] == this.currentMonth) aim = key;
           }
           let len = this.dataList[aim].length;
           if (data == "本月天气") {
           let xdata = [];
           for (let i = 1; i <= len; i++) xdata.push(i);
           let sdata = this.dataList[aim];
           this.chartOptions.xAxis[0].data = xdata;
           this.chartOptions.series[0].data = sdata;
           this.chart.setOption(this.chartOptions);
           } else {
           let currentDate = this.date.getDate();
           let currentmonth = this.date.getMonth() + 1;
           let xdata = [], sdata = []; 
           if (currentDate + 7 <= len) {
               for (let i = 0; i < 7; i++) {
               xdata.push(`${currentmonth}/${currentDate + i}`);
               sdata.push(this.dataList[aim][currentDate + i - 1]);
               }
           } else {
               for (let i = 0; i < len - currentDate + 1; i++) {
               xdata.push(`${currentmonth}/${currentDate + i}`);
               sdata.push(this.dataList[aim][currentDate + i - 1]);
               }
               currentmonth++;
               for (const key in this.monthList) {
               if (this.monthList[key] == currentmonth + "月") aim = key;
               }
               for (let i = 0; xdata.length < 7; i++) {
               xdata.push(`${currentmonth}/${i + 1}`);
               sdata.push(this.dataList[aim][i]);
               }
           }
           this.chartOptions.xAxis[0].data = xdata;
           this.chartOptions.series[0].data = sdata;
           this.chart.setOption(this.chartOptions);
           }
       },
       },
   });
   </script> 
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17457973.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！