写点什么

使用和风天气 API 10 分钟搭建天气预报数据看板

作者:蒋川
  • 2022 年 4 月 11 日
  • 本文字数:5247 字

    阅读完需:约 17 分钟


本文首发:《使用和风天气 API 10分钟搭建天气预报数据看板)》


和风天气 API 是免费天气 API 中最好用的之一,我曾在《最好用的免费天气 API 接口测评》文章里测评了多款天气 API,和风天气在其中是性价比最高的,不仅非商业无限免费,而且免费和付费几乎同权,甚至未来七天天气预测、空气质量、天文气象这种在其他 API 中付费的选项,在和风天气里也是免费的。


本文手把手教大家如何使用和风天气 API 配合低代码开发工具卡拉云在 10 分钟内快速搭建天气数据看板。


我们先来看看最终搭建效果,包含实时天气数据 + 未来天气数据 组成天气可视化数据看板。



和风天气 API 搭建天气数据看板 Demo:https://my.kalacloud.com/apps/ykxauq3u6r/published

第 1 步:注册和风天气 API 及卡拉云

(1)注册和风天气 API



(2)注册卡拉云

  • 免费注册卡拉云,用卡拉云 10 分钟就能完成天气数据看板的搭建。

  • 卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。无需懂任何前端技术,简单拖拽即可快速搭建天气数据看板等数据工具,还可以分享给其他同学一起使用。

第 2 步:接入和风天气 API 数据到卡拉云


我们在卡拉云数据源页面,现将和风天气的四个数据源 API 分别添加进去。


注意,在添加数据源时,记得把 API Key 也一同添加进去


例如添加和风天气 24 小时预报 API:


https://devapi.qweather.com/v7/weather/24h?key=【你的 API KEY】&
复制代码



像这样将和风天气的四个数据源分别添加进去


实时天气:https://devapi.qweather.com/v7/weather/now?key=【你的 API KEY】&逐小时天气预报:https://devapi.qweather.com/v7/weather/24h?key=【你的 API KEY】&7日逐天天气预报:https://devapi.qweather.com/v7/weather/7d?key=【你的 API KEY】&实时空气质量:https://devapi.qweather.com/v7/air/now?key=【你的 API KEY】&
复制代码

第 3 步:创建 APP,搭建方法初探

(1)创建「和风天气数据看板」app


卡拉云应用页面 创建「和风天气数据看板」app,进入 APP 后,选择顶部的「查询编辑」,进入数据源编辑。

(2)接入并测试 API,拿到返回数据


  1. 切换到「查询编辑」页面

  2. 新建查询:我们新建一个 query,这是后端数据源与前端组件连接的桥梁

  3. 数据源选择我们刚刚添加的「和风天气 &实时」

  4. 把 query 的名字改为 day_now 方便我们一会在代码中使用

  5. 在请求参数的部分写上 location=101010100 这是北京地区的编号(地点代码再此查看

  6. 点击保存、运行

  7. 可以看到 API 返回的数据


此时,我们已经把卡拉云和和风天气 API 连接在一起了,下一步,我们把数据映射到前端组件上

(3)将 API 返回数据映射到前端组件上


{{  (function setOption() {      const option = {
title: { text: '☔️ 小时天气预报' }, tooltip: { trigger: 'axis' },
toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: Array.from(day_hours.data.hourly,({fxTime})=>fxTime.slice(11,16)), axisLabel: { // X 坐标轴标签相关设置 interval: 0, rotate: '45' } }, yAxis: {
type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { type: 'line', data: Array.from(day_hours.data.hourly,({temp})=>temp), markPoint: { data: [ { type: 'max', name: 'Max' }, { type: 'min', name: 'Min' } ] }, markLine: { data: [{ type: 'average', name: 'Avg' }] } }, {
markLine: { data: [ { type: 'average', name: 'Avg' }, [ { symbol: 'none', x: '90%', yAxis: 'max' }, { symbol: 'circle', label: { position: 'start', formatter: 'Max' }, type: 'max', name: '最高点' } ] ] } } ]} return option; })()}}
复制代码


  • 卡拉云的图表组件逻辑和语法与 Echarts 一致,如果你熟练使用 Echarts 的话,那么在卡拉云画图表也一样容易。

  • 读取刚刚接入的 query


Array.from(day_hours.data.hourly,({temp})=>temp),
复制代码


我们拿 day_hours 查询里的 hourly.temp 中的数据,这是 24 小时天气预报,我们要拿 24 个小时的每小时温度值。(请务必跟随本教程一步一步走并保持与本教程相同的命名,否则容易出错)


  • 就是这么简单,直接把代码粘贴在卡拉云的图表组件中,折线图就自动生成了

(4)添加不同城市查询功能


  • 拖拽一个选择组件到页面上

  • 在选择组件的配置页,配置组件,在选项标签和选项值中填入一下代码,地点与地点代码一一对应


    ["北京","上海","杭州","广州","深圳","南京"]
复制代码


    ["101010100","101020100","101210101","101280101","101280601","101190101"]
复制代码


  • 将 select1 组件中的数据映射到 query 里


location={{select1.value}}
复制代码


把地点代码更换为{{select1.value}} 选择组件数据即可将前后端连接起来。


当用户在选择组件中选择城市名称,图表组件就会调取 API 显示对应的城市天气预报。


至此,一个最基本的天气看板已经搭建完成,下一步,我们来根据这一步的搭建原理,把其他数据也拉下来,映射到对应的组件中去。

第 4 步:将所有组件接入数据

(1)在数据源接入所有需要的和风天气 API 数据

如同第 3 步一样,我们将所有 API 数据先接入 query 备用。



  • 实时天气:https ://devapi.qweather.com/v7/weather/now?key=【你的 API KEY】&

  • 逐小时天气预报:https: //devapi.qweather.com/v7/weather/24h?key=【你的 API KEY】&

  • 7 日逐天天气预报:https ://devapi.qweather.com/v7/weather/7d?key=【你的 API KEY】&

  • 实时空气质量:https ://devapi.qweather.com/v7/air/now?key=【你的 API KEY】&

(2)在查询编辑中创建数据源对应的 query

(3)创建温湿度、空气质量仪表盘


{{ //温度仪表盘  (function setOption() {      const option = {
title: { text: '温度' },
series: [ { type: 'gauge', center: ['50%', '60%'], startAngle: 200, endAngle: -20, min: 0, max: 60, splitNumber: 12, itemStyle: { color: '#FFAB91' }, progress: { show: true, width: 30 }, pointer: { show: false }, axisLine: { lineStyle: { width: 30 } }, axisTick: { distance: -45, splitNumber: 5, lineStyle: { width: 2, color: '#999' } }, splitLine: { distance: -52, length: 14, lineStyle: { width: 3, color: '#999' } }, axisLabel: { distance: -20, color: '#999', fontSize: 20 }, anchor: { show: false }, title: { show: false }, detail: { valueAnimation: true, width: '60%', lineHeight: 40, borderRadius: 8, offsetCenter: [0, '-15%'], fontSize: 30, fontWeight: 'bolder', formatter: '{value} °C', color: 'auto' }, data: [day_now.data.now.temp] // 映射 query day_now 返回的数据
}, { type: 'gauge', center: ['50%', '60%'], startAngle: 200, endAngle: -20, min: 0, max: 60, itemStyle: { color: '#FD7347' }, progress: { show: true, width: 8 }, pointer: { show: false }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, detail: { show: false }, data: [day_now.data.now.temp] } ]};
return option; })()}}
复制代码

(5)创建未来七天天气预报折线图


{{  (function setOption() {      const option = {
title: { text: '🪐 七天预报' }, tooltip: { trigger: 'axis' }, legend: {}, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: { readOnly: false }, magicType: { type: ['line', 'bar'] }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: Array.from(day_seven.data.daily,({fxDate})=>fxDate.slice(5)),
}, yAxis: { type: 'value', axisLabel: { formatter: '{value} °C' } }, series: [ { name: '最高气温', type: 'line', data: Array.from(day_seven.data.daily,({tempMax})=>tempMax), markPoint: { data: [ { type: 'max', name: 'Max' }, { type: 'min', name: 'Min' } ] }, markLine: { data: [{ type: 'average', name: 'Avg' }] } }, { name: '最低气温', type: 'line', data: Array.from(day_seven.data.daily,({tempMin})=>tempMin), markPoint: { data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }] }, markLine: { data: [ { type: 'average', name: 'Avg' }, [ { symbol: 'none', x: '90%', yAxis: 'max' }, { symbol: 'circle', label: { position: 'start', formatter: 'Max' }, type: 'max', name: '最高点' } ] ] } } ]};
return option; })()}}
复制代码

(6)将 API 返回的数据细节映射到 text 组件中


风向:{{day_now.data.now.windDir}} // 范例
复制代码


  • 我们可以将 API 返回列表中的值摘出来,一一映射到 text 组件中,这样我们就可以制作一份天气预报数据详情页了。

  • 映射方法也很容易,比如「风向」,我们可以这么写风向:{{day_now.data.now.windDir}}

  • day_now.data :这个是实时天气的 query 返回值

  • now.windDir:这个是day_now.data 里包含的有关方向的数组

第 5 步:将天气数据看板发布到网络


到这里,我们已经完成了天气预报数据看板。


在卡拉云制作的工具,还可以点右上角的发布 & 分享,分享应用给团队里的其他同学使用。


分享天气数据看板给你的团队 :https://my.kalacloud.com/apps/ykxauq3u6r/published

卡拉云搭建总结

本文详细讲解了如何使用卡拉云在 10 分钟内快速搭建天气数据看板。使用卡拉云完全不用学习任何前端技术,直接拖拽,简单好用。



卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云


扩展阅读:


发布于: 刚刚阅读数: 2
用户头像

蒋川

关注

我的微信:HiJiangChuan 2020.09.08 加入

卡拉云 CMO 卡拉云是一套帮助后端程序员搭建企业内部工具的系统,欢迎试用 www.kalacloud.com

评论

发布
暂无评论
使用和风天气 API 10分钟搭建天气预报数据看板_API_蒋川_InfoQ写作平台