设计思路
之前数据分层处理,最后把轻度聚合的结果保存到 ClickHouse 中,主要的目的就是提供即时的数据查询、统计、分析服务。这些统计服务一般会用两种形式展现,一种是为专业的数据分析人员的 BI 工具,一种是面向非专业人员的更加直观的数据大屏。
以下主要是面向百度的 sugar 的数据大屏服务的接口开发
最终效果图
分析各个可视化模块
在可视化大屏中每个组件都需要一个单独的接口,图中一共涉及 8 个组件。
组件名称 |组件 |查询指标 |对应的数据表
接口执行过程:
之前我们实现了 DWS 层计算后写入到 ClickHouse 中,接下来就是要为可视化大屏服务,提供一个数据接口用来查询 ClickHouse 中的数据。这里主要有两项工作
- 配置可视化大屏服务。
- 编写数据查询接口以供可视化大屏进行访问。
Sugar 数据大屏自己摸索下
总成交金额接口
Sugar 组件:数字翻牌器
添加组件
从大屏的编辑器上方选择【指标】→【数字翻牌器】
配置组件
点击组件,在右侧的菜单中选择【数据】,绑定方式改为【API 拉取】,下方的路径填写 $API_HOST/api/sugar/gmv
,这个就是 sugar 会周期性访问的数据接口地址,可以自定义,其中$API_HOST 是个全局变量,需要在空间中配置。
查询组件需要的数据格式
在数据绑定的位置选择【静态 JSON】,可以看到数据需要的 JSON 格式
接口访问路径以及返回格式
访问路径/api/sugar/gmv
数据接口实现
代码结构:
编写接口代码
//code
测试本地接口
1 ) 启动 SpringBoot 应用程序
2) 用浏览器访问测试接口
http://localhost:8070/api/sugar/gmv
3) 输出结果
内网穿透
通常个人电脑无论是连接 WIFI 上网还是用网线上网,都是属于局域网里边的,外网无法直接访问到你的电脑,内网穿透可以让你的局域网中的电脑实现被外网访问功能。
目前国内网穿透工具很多,常见的比如花生壳、Ngrok、网云穿等。
注册配置网云穿,使用前置工作。
配置成功访问:
配置 Sugar 大屏
配置服务器全局 Host
回到 Sugar 的空间管理中,在【空间设置】中增加$API_HOST
大屏刷新数据
然后回到大屏配置中,刷新图表数据,能看到数字已经显示
以下的模块和上面的方法类似,理解操作试试。
商品交易额不同维度的统计
// operation
分省市的热力图统计
// operation
流量统计数据
// operation
热词字符云
// operation
添加素材
// operation
总结
数据接口部分开发的重点:
- 学会通过 springboot 搭建一个 web 服务。
- 学会在 Web 服务使用注解方式,通过 SQL 语句查询 ClickHouse。
- 学会通过 Sugar 实现数据大屏可视化配置,了解其中的地图、柱形图、饼图、折线图、
表格、轮播表、字符云等组件的使用预配置。 - 学会使用内网穿透工具,方便调试本地接口与互联网服务对接