天气趋势

GTK / 2023-06-05 / 原文

习题链接

天气趋势

任务

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

分类：ECharts

关键点

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

代码实现 && 完整的代码

完整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>