所谓数据可视化,我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比,走向。对于数据可视化,很多互联网公司是很看重这一块的,包括大厂;就比如阿里的淘宝,双十一的时候往往就需要将消费者的一些数据通过图的形式展现出来。接下来我们就来实现一个天气的数据可视化(移动端开发),看如下效果图(iPhone6/7/8)。
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;
}
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;
}
}
arduino复制代码//html
<div class="echart-container"> </div>
css复制代码//css
.echart-container {
width: 100%;
height: 50vh;
}
将这段代码复制到onMounted的回调函数中,这样我们就能获取到定位信息。
把上图中的代码复制到获取天气的函数中,并将它放在获取定位成功后执行,传入定位的城市,这样就可以获得定位的城市的天气情况了。
javascript复制代码weather.getForecast('cityName', function(err, data) {
console.log(err, data); });
注意:此时输出的未来天气是一个数组。
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>
定义一个方法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"哟。
这样就能帮我们初始化一个折线图了。
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,以便在自己的项目中展示实时的天气信息。
在开始编码之前,首先需要了解所要接入的天气预报API。通常,API提供商会提供一个开发者文档,其中包含了API的基本信息、请求方式、参数、响应格式等重要内容。仔细阅读文档,了解如何获取API访问密钥(API Key),以及如何构建请求URL。
大多数API都需要一个访问密钥来验证请求的合法性。访问API提供商的官方网站,注册账号,并按照指引获取API访问密钥。请妥善保管好这个密钥,不要泄露给他人。例如 APISpace 的 天气预报查询。
https://www.apispace.com/eolink/api/456456/introduction?utm_source=tth&utm_content=deep&utm_term=tqcx
注册了 APISpace 之后,我们可以在控制台的访问设置中,查看自己的API密钥(token)。
根据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。
使用编程语言(如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)
在实际应用中,还需要考虑错误处理和优化。例如,如果网络请求失败或者API返回错误代码,应该给出相应的错误提示。此外,可以考虑将API请求的结果缓存起来,以减少不必要的网络请求和提高应用的响应速度。
在接入和使用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对象。
*请认真填写需求信息,我们会在24小时内与您取得联系。