Flink实时数仓（数据可视化）

1.1 设计思路

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

　　以下主要是面向百度的sugar的数据大屏服务的接口开发。

1.2 需求梳理

1.2.1 最终显示效果图

Flink实时数仓（数据可视化）

1.2.2 分析可视化大屏

Flink实时数仓（数据可视化）

　　在可视化大屏中每个组件都需要一个单独的接口，图中一共涉及8个组件。

组件名称	组件	查询指标	对应的数据表
总成交金额	数字翻牌	订单总金额	product_stats
省市热力图查询	热力图	省市分组订单金额	province_stats
分时流量	折线图	UV分时数 PV分时数新用户分时数	visitor_stats
品牌TopN	水平柱状图	按品牌分组订单金额	product_stats
品类分布	饼状图	按品类分组订单金额	product_stats
热词字符云	字符云	关键词分组计数	keyword_stats
流量表格	交叉透视表	UV数(新老用户) PV数(新老用户) 跳出率(新老用户) 平均访问时长 (新老用户) 平均访问页面数(新老用户)	visitor_stats
热门商品	轮播表格	按SPU分组订单金额	product_stats

1.2.3 接口执行过程

Flink实时数仓（数据可视化）

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

　　　　1）配置可视化大屏服务

　　　　2）编写数据查询接口以供可视化大屏进行访问

第 2 章 sugar数据大屏

2.1 产品介绍

　　Sugar是百度云推出的敏捷 BI 和数据可视化平台，目标是解决报表和大屏的数据 BI 分析和可视化问题，解放数据可视化系统的开发人力。

2.2 使用入口

　　地址如下：https://cloud.baidu.com/product/sugar.html

Flink实时数仓（数据可视化）

2.3 创建数据大屏

　　1）点击立即使用, 登录百度账号

　　2）首次使用需要实名认证, 然后有30天的免费使用期限

Flink实时数仓（数据可视化）

　　3）会看到一个免费试用版的组织

　　4）进入试用版组织

　　5）选择第一个空间

Flink实时数仓（数据可视化）

　　6）创建数据大屏

Flink实时数仓（数据可视化）

　　7）选择空模板或者根据现有模板进行修改，我们这里选择空白模板，并指定大屏的名称

Flink实时数仓（数据可视化）

　　8）点击确定后会进入大屏编辑页面

Flink实时数仓（数据可视化）

第 3 章总成交金额接口

3.1 Sugar组件: 数字翻牌器

　　成交金额是个数字, 使用数字翻牌器比较合适

3.1.1 添加数字翻牌器组件

Flink实时数仓（数据可视化）

3.1.2 配置数字翻牌器组件

　　数据绑定方式选择api拉取. 所以我们需要开发接口来提供数据

Flink实时数仓（数据可视化）

　　这个就是sugar会周期性访问的数据接口地址，可以自定义，其中$CUR_HOST是个全局变量，需要在空间中配置（后面再说）

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

　　在数据绑定的位置选择【静态JSON】，可以看到数据需要的JSON格式

Flink实时数仓（数据可视化）

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

　　1）路径：/api/sugar/gmv

　　2）返回的数据格式

{
  "status": 0,
  "msg": "",
  "data": 1201070.6983345444
}

3.2 数据接口实现

　　使用Sprintboot来实现接口

3.2.1 创建springboot子模块

Flink实时数仓（数据可视化）

3.2.2 手动添加其他依赖

<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-lang3</artifactId>
    <version>3.11</version>
</dependency>

<dependency>
    <groupId>ru.yandex.clickhouse</groupId>
    <artifactId>clickhouse-jdbc</artifactId>
    <version>0.2.6</version>
</dependency>

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.75</version>
</dependency>

3.2.3 代码结构分层

分层	类	处理内容
controller 控制层	SugarController	查询交易额接口及返回参数处理
service 服务层	ProductStatsService ProductStatsServiceImpl	查询商品统计数据
mapper 数据映射层	ProductStatsMapper	编写SQL查询商品统计表

3.2.4 springboot配置

　　在application.properties内添加如下配置：

server.port=8070

#配置ClickHouse驱动以及URL
spring.datasource.driver-class-name=ru.yandex.clickhouse.ClickHouseDriver
spring.datasource.url=jdbc:clickhouse://hadoop164:8123/flinkdb

3.2.5 创建需要的包结构

Flink实时数仓（数据可视化）

3.2.6 在应用入口添加扫描包

package com.yuange.flinkpublisher;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
// 填入mapper包的全路径
@MapperScan(basePackages = "com.yuange.flinkpublisher.mapper")
public class FlinkPublisherApplication {
    public static void main(String[] args) {
        SpringApplication.run(FlinkPublisherApplication.class, args);
    }
}

3.2.7 Mapper层

　　在mapper包下创建接口：ProductStatsMapper

package com.yuange.flinkpublisher.mapper;

import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.math.BigDecimal;

/**
 * @作者：袁哥
 * @时间：2021/8/9 19:34
 */
public interface ProductStatsMapper {
    //计算当天或者指定日志总的销售额
    @Select("select sum(order_amount)\n" +
            "from product_stats_2021\n" +
            "where toYYYYMMDD(stt) = #{date}")
    BigDecimal getGMV(@Param("date") int date);
}

3.2.8 Service层

　　1）创建接口

package com.yuange.flinkpublisher.service;

import java.math.BigDecimal;

/**
 * @作者：袁哥
 * @时间：2021/8/9 19:33
 */
public interface ProductStatsService {
    BigDecimal getGMV(int date);
}

　　2）实现接口

package com.yuange.flinkpublisher.service;

import com.yuange.flinkpublisher.mapper.ProductStatsMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.math.BigDecimal;

/**
 * @作者：袁哥
 * @时间：2021/8/9 19:33
 */
@Service
public class ProductStatsServiceImpl implements ProductStatsService {

    @Autowired
    ProductStatsMapper productStatsMapper;

    @Override
    public BigDecimal getGMV(int date) {
        return productStatsMapper.getGMV(date);
    }
}

3.2.9 Controller层

　　该类主要接收用户请求，并做出相应。根据sugar不同的组件，返回不同的格式

package com.yuange.flinkpublisher.controller;

import com.alibaba.fastjson.JSONObject;
import com.yuange.flinkpublisher.service.ProductStatsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;
import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * @作者：袁哥
 * @时间：2021/8/9 19:33
 */
@RestController
public class SugarController {

    @Autowired
    ProductStatsService productStatsService;

    @RequestMapping("/sugar/api/gmv")
    public String gmv(@RequestParam(value = "date",defaultValue = "0") int date){
        if (date == 0){
            date = Integer.parseInt(new SimpleDateFormat("yyyyMMdd").format(new Date()));
        }

        BigDecimal gmv = productStatsService.getGMV(date);

        JSONObject result = new JSONObject();
        result.put("status",0);
        result.put("msg","");
        result.put("data",gmv);
        return result.toJSONString();
    }
}

3.2.10 本地测试

　　1）启动web应用

　　2）在浏览器输入地址：http://localhost:8070/sugar/api/gmv?date=20210809

　　3）返回值

Flink实时数仓（数据可视化）

3.3 内网穿透

　　前面定义的接口, 只能在局域网使用, sugar是没有办法直接读到这个接口, 只有让接口有公网地址才行，生产阶段可以直接把服务器部署在云上就行了, 自然就有了公网地址，在学习阶段可以使用工具实现内网穿透来解决这个问题

3.3.1 内网穿透的作用

　　通常个人电脑无论是连接WIFI上网还是用网线上网，都是属于局域网里边的，外网无法直接访问到你的电脑，内网穿透可以让你的局域网中的电脑实现被外网访问功能。

3.3.2 现有工具

　　目前国内网穿透工具很多，常见的比如花生壳、Ngrok、网云穿等。

　　花生壳：https://hsk.oray.com

　　Ngrok: http://www.ngrok.cc

　　网云穿：http://www.neiwangchuantou.net/ ，本文以介绍网云穿为主

3.3.3 配置步骤

　　1）注册网云穿

　　2）登录之后到个人版领取免费隧道并进行配置

Flink实时数仓（数据可视化）

　　3）下载客户端, 解压, 直接打开

Flink实时数仓（数据可视化）

3.3.4 使用外网地址访问

Flink实时数仓（数据可视化）

3.4 配置sugar大屏

3.4.1 配置服务器全局Host

　　进入空间管理

Flink实时数仓（数据可视化）

3.4.2 大屏刷新数据

　　回到大屏配置

Flink实时数仓（数据可视化）

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

4.1 从三个维度统计商品交易额

　　1）品牌维度做柱状图

　　2）品类饼形图

　　3）商品spu 轮播图

　　这三个的共同特征是可以根据商品统计信息计算出来。

Flink实时数仓（数据可视化）

4.2 sugar组件设置

4.2.1 横向柱图(品牌)

　　1）添加横向柱状图

Flink实时数仓（数据可视化）

　　2）查看数据格式

Flink实时数仓（数据可视化）

{
  "status": 0,
  "msg": "",
  "data": {
    "categories": [
      "苹果",
      "三星",
      "华为",
      "oppo",
      "vivo",
      "小米99"
    ],
    "series": [
      {
        "name": "手机品牌",
        "data": [
          5295,
          7213,
          8346,
          5473,
          9197,
          9919
        ]
      }
    ]
  }
}

　　3）修改数据绑定方式

$API_HOST/sugar/api/gmv/tm?date=20210809&limit=10

Flink实时数仓（数据可视化）

　　4）修改排序规则

Flink实时数仓（数据可视化）

4.2.2 轮播饼图(品类)

　　1）添加轮播饼图

Flink实时数仓（数据可视化）

　　2）查看数据格式

{
  "status": 0,
  "msg": "",
  "data": [
    {
      "name": "PC",
      "value": 97,
      "url": "http://www.baidu.com"
    },
    {
      "name": "iOS",
      "value": 50,
      "url": "http://www.baidu.com"
    },
    {
      "name": "Android",
      "value": 59,
      "url": "http://www.baidu.com"
    },
    {
      "name": "windows phone",
      "value": 29
    },
    {
      "name": "Black berry",
      "value": 3
    },
    {
      "name": "Nokia S60",
      "value": 2
    },
    {
      "name": "Nokia S90",
      "value": 1
    }
  ]
}

　　3）修改数据绑定方式

$API_HOST/sugar/api/gmv/c3?date=20210809

4.2.3 轮播表格(spu)

　　1）添加轮播表格

Flink实时数仓（数据可视化）

　　2）查看数据格式

{
  "status": 0,
  "msg": "",
  "data": {
    "columns": [
      {
        "name": "分组织",
        "id": "subsys"
      },
      {
        "name": "部门",
        "id": "module"
      },
      {
        "name": "业务组",
        "id": "business"
      },
      {
        "name": "姓名",
        "id": "name"
      },
      {
        "name": "销售额",
        "id": "value",
        "accuracy": 2
      }
    ],
    "rows": [
      {
        "subsys": "北京总部",
        "module": "市场部",
        "business": "第一小分队",
        "name": "张三",
        "value": 6672389,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "北京总部",
        "module": "市场部",
        "business": "第一小分队",
        "name": "李四",
        "value": 7673456.78,
        "value_level": "green",
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "北京总部",
        "module": "市场二部",
        "business": "第二小分队",
        "name": "百度",
        "__showx_row_level": "red",
        "value": "<a href=\"http://www.baidu.com\" target=\"_blank\">百度链接</a>",
        "value_ishtml": true,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售部",
        "business": "第三小分队",
        "name": "张伟",
        "value": 8967569,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售部",
        "business": "第三小分队",
        "name": "李静",
        "value": 5645657,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售部",
        "business": "第三小分队",
        "name": "完颜付",
        "value": 4999889,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售部",
        "business": "第三小分队",
        "name": "纳兰德",
        "value": 8878765,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售二部",
        "business": "突击小队",
        "name": "迪乌夫",
        "value": 7609878,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售二部",
        "business": "突击小队",
        "name": "南宫强",
        "value": 6786546,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售二部",
        "business": "突击小队",
        "name": "萨珊珊",
        "value": 3909786,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售二部",
        "business": "王牌小组",
        "value_background": "#93dcf3",
        "name": "占志林",
        "value": 10735687,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售二部",
        "business": "王牌小组",
        "name": "欧阳菲",
        "value": 8767544,
        "url": "http://www.baidu.com"
      },
      {
        "subsys": "上海分部",
        "module": "销售二部",
        "business": "王牌小组",
        "name": "令狐光",
        "value": 7867455,
        "url": "http://www.baidu.com"
      }
    ]
  }
}

轮播表格

1.1 设计思路

1.2 需求梳理

1.2.1 最终显示效果图

1.2.2 分析可视化大屏

1.2.3 接口执行过程

第 2 章 sugar数据大屏

2.1 产品介绍

2.2 使用入口

2.3 创建数据大屏

第 3 章 总成交金额接口

3.1 Sugar组件: 数字翻牌器

3.1.1 添加数字翻牌器组件

3.1.2 配置数字翻牌器组件

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

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

3.2 数据接口实现

3.2.1 创建springboot子模块

3.2.2 手动添加其他依赖

3.2.3 代码结构分层

3.2.4 springboot配置

3.2.5 创建需要的包结构

3.2.6 在应用入口添加扫描包

3.2.7 Mapper层

3.2.8 Service层

1）创建接口

2）实现接口

3.2.9 Controller层

3.2.10 本地测试

3.3 内网穿透

3.3.1 内网穿透的作用

3.3.2 现有工具

3.3.3 配置步骤

3.3.4 使用外网地址访问

3.4 配置sugar大屏

3.4.1 配置服务器全局Host

3.4.2 大屏刷新数据

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

4.1 从三个维度统计商品交易额

4.2 sugar组件设置

4.2.1 横向柱图(品牌)

1）添加横向柱状图

2）查看数据格式

3）修改数据绑定方式

4）修改排序规则

4.2.2 轮播饼图(品类)

1）添加轮播饼图

2）查看数据格式

3）修改数据绑定方式

4.2.3 轮播表格(spu)

1）添加轮播表格

2）查看数据格式

第 3 章总成交金额接口

　　1）创建接口

　　2）实现接口

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

　　1）添加横向柱状图

　　2）查看数据格式

　　3）修改数据绑定方式

　　4）修改排序规则

　　1）添加轮播饼图

　　2）查看数据格式

　　3）修改数据绑定方式

　　1）添加轮播表格

　　2）查看数据格式