第1章 数据可视化接口设计

1.1  设计思路

        之前数据分层处理，最后把轻度聚合的结果保存到 ClickHouse 中，主要的目的就是提供即时的数据查询、统计、分析服务。这些统计服务一般会用两种形式展现，一种是为专业的数据分析人员的 BI 工具，一种是面向非专业人员的更加直观的数据大屏。以下主要是面向百度的 sugar 的数据大屏服务的接口开发。

 1.2.2 分析可视化大屏

3、接口执行过程

之前我们实现了 DWS 层计算后写入到 ClickHouse 中，接下来就是要为可视化大屏服
务，提供一个数据接口用来查询 ClickHouse 中的数据。这里主要有两项工作
➢ 配置可视化大屏服务。
➢ 编写数据查询接口以供可视化大屏进行访问

第2章 Sugar 数据大屏

3  创建数据大屏

2 配置组件 

点击组件，在右侧的菜单中选择【数据】，绑定方式改为【API 拉取】
下方的路径填写 $API_HOST/api/sugar/gmv
这个就是 sugar 会周期性访问的数据接口地址，可以自定义，其中$API_HOST 是个全局变量，需要在空间中配置。

3 查询组件需要的数据格式

第3章  数据接口实现

 接口访问路径以及返回格式

 

 1 创建数据接口模块

 2 代码分层结构以及实现

 1) 修改 Springboot 核心配置文件 application.properties

server.port=8070
# 配置 ClickHouse  驱动以及 URL
spring.datasource.driver-class-name=ru.yandex.clickhouse.ClickHouseDriver
spring.datasource.url=jdbc:clickhouse://hadoop202:8123/default

2) 在 Application 中添加@MapperScan 的注解

@SpringBootApplication
@MapperScan(basePackages = "com.atguigu.gmall.mapper")
public class Gmall2021PublisherApplication { 
public static void main(String[] args) {
SpringApplication.run(Gmall2021PublisherApplication.class, args);
}
}

3) Mapper 层：创建 ProductStatsMapper 接口

/** 
* Desc:  商品统计 Mapper
*/
public interface ProductStatsMapper {
// 获取商品交易额
@Select("select sum(order_amount) order_amount " +
"from product_stats_2021 where toYYYYMMDD(stt)=#{date}")
public BigDecimal getGMV(int date);
}

4) Service 层：创建 ProductStatsService 接口 

/** 
* Desc:  商品统计接口
*/
public interface ProductStatsService {
// 获取某一天的总交易额
public BigDecimal getGMV(int date);
}

5) Service 层：创建 ProductStatsServiceImpl 实现类

/** 
* Desc:  商品统计接口实现类
*/
@Service
public class ProductStatsServiceImpl implements ProductStatsService {
@Autowired
ProductStatsMapper productStatsMapper;
@Override
public BigDecimal getGMV(int date) {
return productStatsMapper.getGMV(date);
}
}

 6) Controller 层：创建 SugarController 类
该类主要接收用户请求，并做出相应。根据 sugar 不同的组件，返回不同的格式

/** 
* Desc: sugar 处理类
*  主要接收用户请求，并做出相应。根据 sugar 不同的组件，返回不同的格式
*/
@RestController
@RequestMapping("/api/sugar")
public class SugarController {
@Autowired
ProductStatsService productStatsService;
/*
{
"status": 0,
"msg": "",
"data": 1201081.1632389291
}
*/
@RequestMapping("/gmv")
public String getGMV(@RequestParam(value = "date",defaultValue = "0") Integer date) {
if(date==0){
date=now();
}
BigDecimal gmv = productStatsService.getGMV(date);
String json = "{ \"status\": 0, \"data\":" + gmv + "}";
return json;
}
private int now(){
String yyyyMMdd = DateFormatUtils.format(new Date(), "yyyyMMdd");
return Integer.valueOf(yyyyMMdd);
}
}

3.2.3 测试本地接口

1) 启动 SpringBoot 应用程序
2) 用浏览器访问测试接口
http://localhost:8070/api/sugar/gmv
3) 输出结果

回到大屏配置中，刷新图表数据，能看到数字已经显示

 第4章 商品交易额不同维度的统计