一天完成天气预报小demo
张*
ajax api接口 数据可视化 web前端
项目描述
使用ajax调取高德api天气接口并渲染页面进行数据可视化
上传时间
2020.09.08
浏览人数
2509人
张*
天津市河东区
Hot:8434
开发项目：web前端
开发环境：WebStorm
开发者：汐ゆゆ
项目详情：
1.界面展示
这次仿照中国天气网的展示界面做一个天气预报的小模块
还进行了数据可视化处理（折线图）让结果展示得更直观
参考的页面样式
2.功能介绍
功能就是通过用户输入的地址文字来获取该地区的实时以及未来三天的天气
例如我们想查询山东牡丹区的天气
只要输入“牡丹”就会自动识别
重名的地理位置需要加上详细的省市区来进行区别
成功后页面会展示新的气象信息
3.功能实现
首先页面加载时会默认加载北京的天气情况 来做一次最初的展示
用户输入地理位置信息后 点击获取按钮 即调用一次ajax向后台发送请求
获取到地理位置的adcode（地区编号）
然后调用下一个函数getweather（）传入的参数是刚才获取到的adcode
这个函数里又继续调用了两个ajax 分别获取用于渲染天气信息和折线图的数据
拿到这个数据就可以渲染页面了
下面又应用了echarts商业级数据图表
选择合适的实例来应用 配置好之后只要填入相关的数据即可
首先将第二个ajax获取到的数据进行处理 方便echarts使用
经过处理之后的数据已经是很简洁的符合需要的
再传入参数执行生成折线图操作
最后就能生成对应的折线图了
图标的变换应用了switch case判断来对应不同的天气
4.总结
这一次还是练习了通过高德平台提供的api接口来获取数据
这次的重点是同步异步处理 这次的项目由于实际需求 需要使用同步
只有在第一个ajax执行完成拿到数据之后才能执行后面的代码
又对同步和异步的问题有了更深入的认识
第一次应用了echarts模块进行了数据可视化的展示
虽然是一个很简单的demo只需要填入data
但是也感觉很有意思 拓展了知识面
如有错误敬请多多指教 感谢阅读！！
项目地址
https://www.ruruband.xyz/html/weather/index.html
张*
