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

蒋川
983 阅读8分钟

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

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

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

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

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

和风天气 API 搭建天气数据看板 Demo：my.kalacloud.com/apps/ykxauq…

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

（1）注册和风天气 API

01-01-qweath-api-key

（2）注册卡拉云

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

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

01-02-weather-api-data

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

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

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

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

02-01-all-data-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】&

第 3 步：创建 APP，搭建方法初探

（1）创建「和风天气数据看板」app

01-04-weather-build

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

（2）接入并测试 API，拿到返回数据

01-05-weather-build-data

  1. 切换到「查询编辑」页面
  2. 新建查询：我们新建一个 query，这是后端数据源与前端组件连接的桥梁
  3. 数据源选择我们刚刚添加的「和风天气&实时」
  4. 把 query 的名字改为 day_now 方便我们一会在代码中使用
  5. 在请求参数的部分写上 location=101010100 这是北京地区的编号（地点代码再此查看）
  6. 点击保存、运行
  7. 可以看到 API 返回的数据

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

（3）将 API 返回数据映射到前端组件上

01-06-line.gif

{{
  (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）添加不同城市查询功能

01-07-select

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

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

    ["北京","上海","杭州","广州","深圳","南京"]

    ["101010100","101020100","101210101","101280101","101280601","101190101"]

  • 将 select1 组件中的数据映射到 query 里01-08-select-query

location={{select1.value}}

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

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

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

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

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

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

02-01-all-data-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

02-query-data

（3）创建温湿度、空气质量仪表盘

02-03-dashboard

{{ //温度仪表盘
  (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）创建未来七天天气预报折线图

02-04-7day

{{
  (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 组件中

02-05-text-query

风向：{{day_now.data.now.windDir}} // 范例
  • 我们可以将 API 返回列表中的值摘出来，一一映射到 text 组件中，这样我们就可以制作一份天气预报数据详情页了。
  • 映射方法也很容易，比如「风向」，我们可以这么写风向：{{day_now.data.now.windDir}}
    • day_now.data ：这个是实时天气的 query 返回值
    • now.windDir：这个是day_now.data 里包含的有关方向的数组

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

02-06-share

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

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

分享天气数据看板给你的团队 ：my.kalacloud.com/apps/ykxauq…

卡拉云搭建总结

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

01-weather-dashboard

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

扩展阅读：

avatar
文章
阅读
粉丝
相关推荐
vue天气卡片制作
3.2k阅读
 · 
3点赞
vue项目 高德地图实现区域多个标点并通过半径距离以此点绘制多个圆（circle），动态显示隐藏圆；实现根据经纬度获取中文地址，根据地址获取经纬度；地图控件显示
464阅读
 · 
5点赞
原生JS+JSON 天气预报小项目 （含源码）
1.1k阅读
 · 
1点赞
vue 小程序地图 图片叠加 覆盖手绘地图
494阅读
 · 
1点赞
vue项目中嵌入「天气预报」功能
1.6k阅读
 · 
3点赞
vue结合高德地图 vue-amap 实现只显示一个省，地图截图
592阅读
 · 
1点赞
vue使用高德地图自定义图片标记点
625阅读
 · 
0点赞
vue中使用地图进行点、线、面绘制（vue + MineMap ）
2.2k阅读
 · 
10点赞
如何阅读Vue3源码？
219阅读
 · 
1点赞