卡拉云
V1
2022/05/22阅读：46主题：默认主题
使用和风天气 API 10分钟搭建天气预报数据看板
第 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，拿到返回数据
-
切换到「查询编辑」页面 -
新建查询：我们新建一个 query，这是后端数据源与前端组件连接的桥梁 -
数据源选择我们刚刚添加的「和风天气&实时」 -
把 query 的名字改为 day_now方便我们一会在代码中使用 -
在请求参数的部分写上 location=101010100这是北京地区的编号（地点代码再此查看） -
点击保存、运行 -
可以看到 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;
})()
}}
{{ // 空气质量仪表盘
(function setOption() {
const option = {
title: {
text: '空气质量'
},
series: [
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 60,
splitNumber: 12,
itemStyle: {
color: '#4ae898'
},
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} AQI',
color: 'auto'
},
data: [day_air.data.now.aqi]
},
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 60,
itemStyle: {
color: '#01c260'
},
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_air.data.now.aqi]
}
]
};
return option;
})()
}}
{{ // 湿度仪表盘
(function setOption() {
const option = {
title: {
text: '湿度'
},
series: [
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
splitNumber: 10,
itemStyle: {
color: '#00deff'
},
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} %',
color: 'auto'
},
data: [day_now.data.now.humidity]
},
{
type: 'gauge',
center: ['50%', '60%'],
startAngle: 200,
endAngle: -20,
min: 0,
max: 100,
itemStyle: {
color: '#31bbcf'
},
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.humidity]
}
]
};
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小时，欢迎免费试用卡拉云
作者介绍
卡拉云
V1