整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

手把手教你Vue+ECharts+高德地图API实现

手把手教你Vue+ECharts+高德地图API实现天气预报数据可视化

所谓数据可视化,我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比,走向。对于数据可视化,很多互联网公司是很看重这一块的,包括大厂;就比如阿里的淘宝,双十一的时候往往就需要将消费者的一些数据通过图的形式展现出来。接下来我们就来实现一个天气的数据可视化(移动端开发),看如下效果图(iPhone6/7/8)。

准备工作

  1. 注册一个高德地图API账号,选择开发支持,地图 JS API。

  1. 登录控制台成为开发者并创建 key。

  1. 进入安全密钥使用说明,找到方式二。

  1. 创建一个vue项目,将vue的一些默认组件和样式删除,在views下新建一个Index.vue,并且在index.js下配置路由。目录结构如下所示:

  1. 通过npm install echarts --save安装一个依赖,这样就可以使用echarts了。

开始(细分11步)

  1. 将准备工作第三步找到的方式二的两个<script>引入到index.html中,将你自己申请的key值和安全密钥粘贴到里面去。这样就可以使用高德地图 JS API 开发地图应用。
  2. 设置头部样式和背景色,时间和切换城市用到了弹性布局。
ini复制代码  //html
  <div class="container">
        <div class="nav">
            <div class="time">7:41</div>
            <div class="city">切换城市</div>
        </div>
  <div>
css复制代码 //css
  .container {
    min-height: 100vh;
    background: #000;
    opacity: 0.7;
    color: #fff;
}

.nav {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}
  1. 设置我们需要的天气数据展示的html+css结构,这主要考查的是切页面能力。
javascript复制代码 //html
 <div class="city-info">
            <p class="city">{{}}</p>
            <p class="weather">{{}}</p>
            <h2 class="temp">
                <em></em>℃
            </h2>
            <div class="detail">
                <span>风力:{{
                }}</span>|
                <span>风向:{{ }}</span>|
                <span>空气湿度:{{  }}</span>
            </div>
        </div>
        <div class="future">
            <div class="group" v-if="futureData.length > 0">
                明天:
                <span class="tm">白天:{{ }}℃ {{ 
                }} {{  }}风 {{ }} </span>
                <span class="tm"> 夜间:{{
                }}℃ {{  }} {{  }}风 {{ 
}}
                </span>
            </div>
            <div class="group" v-if="futureData.length > 0">
                后天:
                <span class="tm">白天:{{ }}℃ {{ 
                }} {{  }}风 {{  }} </span>
                <span class="tm"> 夜间:{{ 
                }}℃ {{  }} {{  }}风 {{ 
}}
                </span>
            </div>
        </div> 
css复制代码//css
.city-info {
    text-align: center;

    .temp {
        font-size: 26px;

        em {
            font-size: 34px;
            font-style: normal;
        }
    }
}

.future {
    padding: 0 10px;
    margin-top: 30px;

    .group {
        height: 44px;
        line-height: 44px;
        background: rgba(255, 255, 255, 0.3);
        margin-bottom: 10px;
        padding: 0 10px;
        font-size: 13px;
        border-radius: 5px;

    }
}

  1. 再放一个div 用于存放折线图。
arduino复制代码//html
<div class="echart-container"> </div>
css复制代码//css
.echart-container {
    width: 100%;
    height: 50vh;
}
  1. 用watchEffect或onMounted来获取天气数据。
  2. 想要获取天气情况我们先要获得定位,这是需要用到高德地图API,我们来到这个位置:开发 > 地图 JS API v2.0 > 教程 > 服务 > 定位,找到IP定位获取当前城市信息。

将这段代码复制到onMounted的回调函数中,这样我们就能获取到定位信息。

  1. 接下来就可以来获取天气了,我们把获取天气封装成一个函数getWeather。同样的我们来到:开发 > 地图 JS API v2.0 > 教程 > 服务 > 天气,找到实时天气查询。

把上图中的代码复制到获取天气的函数中,并将它放在获取定位成功后执行,传入定位的城市,这样就可以获得定位的城市的天气情况了。

  1. 同样的,我们来获取未来几天的天气情况,通过下面的代码就可以获取到。
javascript复制代码weather.getForecast('cityName', function(err, data) {
console.log(err, data); });

注意:此时输出的未来天气是一个数组。

  1. 我们已经获取到了天气数据了,接下来就要把这些数据存起来,把它变成响应式的,然后把它放到页面上展示出来。
ini复制代码 const state=reactive({
            today: {},
            futureData: [],
        })
        
  state.today=data
  state.futureData=data.forecasts
   return {
            ...toRefs(state),
        }

把数据放到页面上我理解的是挖坑然后埋数据,就像下面这样:

ini复制代码 <p class="city">{{ today.city }}</p>
 <p class="weather">{{ today.weather }}</p>

注意:由于futureData是一个数组,我们要在它放数据的div上加一个v-if="futureData.length > 0",要不然会报错。

css复制代码<div class="group" v-if="futureData.length > 0">
                明天:
<span class="tm">白天:{{ futureData[1].dayTemp }}℃ {{ futureData[1].dayWeather}} {{ futureData[1].dayWindDir }}风 {{ futureData[1].dayWindPower }} </span>
<span class="tm"> 夜间:{{ futureData[1].nightTemp }}℃ {{ futureData[1].nightWeather }} {{ futureData[1].nightWindDir }}风 {{ futureData[1].nightWindPower
}}
                </span>
            </div>

  1. 接下来我们就来做一个折线图了,打开ECharts官网,选一个折线图Examples - Apache ECharts

定义一个方法initEchart来完成图的绘制(这里定义了一个空数组来获取未来几天的温度)

kotlin复制代码  const tempArr=ref([])
   data.forecasts.forEach(item=> {
                        tempArr.value.push(item.dayTemp)
                    })
  const echartContainer=ref(null)
  const initEchart=()=> {
            const myChat=echarts.init(echartContainer.value);
            let option={
                xAxis: {
                    type: 'category',
                    data: ['今天', '明天', '后天', '大后天'],
                    lineStyle: {
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },

                },
                yAxis: {
                    type: 'value',
                    show: false

                },
                series: [
                    {
                        data: tempArr.value,
                        type: 'line'
                    }
                ]
            };
            myChat.setOption(option)
        }
   return {
            echartContainer
        }

别忘了在装这幅图的div上挂一个ref="echartContainer"哟。

这样就能帮我们初始化一个折线图了。

  1. 最后直接在获取未来天气中调用initEchart就可以了。

部分代码

xml复制代码<script>
import { toRefs, watchEffect, reactive, ref, onMounted } from 'vue';
import * as echarts from 'echarts';


export default {
    setup() {
        const echartContainer=ref(null)
        const state=reactive({
            today: {},
            futureData: [],
        })
        const tempArr=ref([])



        onMounted(()=> {
            //1.获取定位
            AMap.plugin('AMap.CitySearch', function () {
                var citySearch=new AMap.CitySearch()
                citySearch.getLocalCity(function (status, result) {
                    // console.log(status);
                    if (status==='complete' && result.info==='OK') {
                        // 查询成功,result即为当前所在城市信息
                        //console.log(result.city);
                        getWeather(result.city)
                    }
                })
            })
        })
        const getWeather=(cityName)=> {
            //加载天气查询插件
            AMap.plugin('AMap.Weather', function () {
                //创建天气查询实例
                var weather=new AMap.Weather();

                //执行实时天气信息查询
                weather.getLive(cityName, function (err, data) {
                    console.log(err, data);
                    state.today=data
                });
                //未来的天气
                weather.getForecast(cityName, function (err, data) {
                    console.log(err, data);
                    state.futureData=data.forecasts

                    data.forecasts.forEach(item=> {
                        tempArr.value.push(item.dayTemp)
                    })
                    initEchart()
                });



            });
        }

        const initEchart=()=> {
            const myChat=echarts.init(echartContainer.value);
            let option={
                xAxis: {
                    type: 'category',
                    data: ['今天', '明天', '后天', '大后天'],
                    lineStyle: {
                        color: '#fff'
                    },
                    axisTick: {
                        show: false
                    },

                },
                yAxis: {
                    type: 'value',
                    show: false

                },
                series: [
                    {
                        data: tempArr.value,
                        type: 'line'
                    }
                ]
            };
            myChat.setOption(option)
        }
        return {
            ...toRefs(state),
            echartContainer
        }
    }
}
</script>

结语

ECharts中的一些图表是很好用的,我们可以自己动手多去尝试尝试。未来的学习之旅还很长,对于数据的可视化我们还可以做成3D的效果。本文如有错失,欢迎大家指正,最后感谢大家的观看,点个免费的赞吧??。


作者:一拾九
链接:https://juejin.cn/post/7230078695767294013

在现代的软件开发中,API 扮演着至关重要的角色。通过API,开发者可以将外部的服务或数据集成到自己的应用程序中,极大地丰富了应用程序的功能和用户体验。本文将介绍如何接入一个天气预报查询API,以便在自己的项目中展示实时的天气信息。


1. 了解API

在开始编码之前,首先需要了解所要接入的天气预报API。通常,API提供商会提供一个开发者文档,其中包含了API的基本信息、请求方式、参数、响应格式等重要内容。仔细阅读文档,了解如何获取API访问密钥(API Key),以及如何构建请求URL。


2. 获取API访问密钥

大多数API都需要一个访问密钥来验证请求的合法性。访问API提供商的官方网站,注册账号,并按照指引获取API访问密钥。请妥善保管好这个密钥,不要泄露给他人。例如 APISpace 的 天气预报查询。

https://www.apispace.com/eolink/api/456456/introduction?utm_source=tth&utm_content=deep&utm_term=tqcx


注册了 APISpace 之后,我们可以在控制台的访问设置中,查看自己的API密钥(token)。


3. 构建请求URL

根据API文档,使用API访问密钥和必要的参数(例如,查询的地理位置)来构建请求URL。例如,如果要查询北京今天的天气,请求URL如下所示,以 APISpace 为例:

https://www.apispace.com/eolink/api/456456/introduction?utm_source=tth&utm_content=deep&utm_term=tqcx

https://eolink.o.apispace.com/456456/weather/v001/now?areacode=101010100

这里的 areacode 请求参数表示的是城市ID,大家可以在天气预报查询介绍页中相关文件的文档中查看。

或者是用 城市搜索API 查询想要的城市ID。


4. 发送请求并处理响应

使用编程语言(如Python、JavaScript等)发送HTTP请求到构建好的URL,并处理返回的响应数据。以下是一个简单的 Python 示例:

import requests

url="https://eolink.o.apispace.com/456456/weather/v001/now"

# 城市ID和经纬度,二选一查询
payload={"areacode" : "101010100","lonlat" : "116.407526,39.904030"}

headers={
    "X-APISpace-Token":"API密钥,登录APISpace即可获得"
}

response=requests.request("GET", url, params=payload, headers=headers)

# 提取并展示天气预报信息
print(response.text)


5. 错误处理和优化

在实际应用中,还需要考虑错误处理和优化。例如,如果网络请求失败或者API返回错误代码,应该给出相应的错误提示。此外,可以考虑将API请求的结果缓存起来,以减少不必要的网络请求和提高应用的响应速度。


6. 遵守法律法规

在接入和使用API时,务必遵守相关的法律法规,尊重用户隐私,不非法获取、使用用户数据。


通过以上步骤,您就可以成功接入一个天气预报查询API,并在自己的项目中展示实时的天气信息了。记得在实际开发中,要根据API提供商的具体要求和文档来调整代码和逻辑。

、搜索天气预报API接口

百度天气预报API接口地址:http://developer.baidu.com/map/carapi-7.htm

① 请求地址最少需要3个参数, ak(开发者密钥)、location(请求的城市名称)、output(返回的数据传输格式, 默认为xml)

② 又由于当我们在浏览器中输入示例url, 可以正常返回数据, 所以代表当前请求是HTTP中的get请求,

所以我们可以使用PHP5中的file_get_contents来模拟发送get请求。

2、编写PHP代码

要用到的知识点:simplexml_load_string, 代表把一个xml格式的字符串载入到内存, 生成SimpleXML对象。