实现天气预报走势图

实现效果：

 这里我用的天气接口是网上开源的，可以自己找一下。

 稍微简单封装了一下axiso以及接口

封装的axios：

// import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'

const baseURL = 'https://v0.yiketianqi.com'

const instance = axios.create({
    baseURL,
    timeout: 100000
})

// instance.interceptors.request.use(
//     (config) => {
//         const userStore = useUserStore()
//         if (userStore.token) {
//             config.headers.Authorization = userStore.token
//         }
//         return config
//     },
//     (err) => Promise.reject(err)
// )

instance.interceptors.response.use(
    (res) => {
        if (res.data.code === 0 || res.status == 200) {
            return res
        }
        ElMessage({ message: res.data.message || '服务异常', type: 'error' })
        return Promise.reject(res.data)
    },
    (err) => {
        ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
        console.log(err)
        if (err.response?.status === 401) {
            router.push('/login')
        }
        return Promise.reject(err)
    }
)

export default instance
export { baseURL }

封装的接口：

import instance from '../../utils/requestWeather'

export function getWeather() {
    return instance({
        url: '/api?unescape=1&version=v9&appid=75878732&appsecret=kcKOD1Qz',
        method: 'GET',
    })
}

具体展示页面：

至此，天气预报走势图就完成了，日期，天气描述图片，星期，空气质量这些展示就是通过设置多个x轴控制offset，zlevel属性来实现的。