大数据workshop：《在线用户行为分析：基于流式计算的数据处理及应用》之《数据可视化：构建实时动态运营数据分析大屏》篇

实验背景介绍

了解更多2017云栖大会·成都峰会 TechInsight & Workshop.

本手册为云栖大会Workshop之《在线用户行为分析：基于流式计算的数据处理及应用》场的《数据可视化：构建实时动态运营数据分析大屏》篇所需。主要帮助现场学员熟悉并掌握DataV数据可视化的操作和使用。

实验涉及大数据产品

• DataV数据可视化

前提准备

必备条件：已经从云中沙箱中获取了实验所需的阿里云账号和密码。

实验目标

本实验将会实现如下的网站实时流量统计大屏。

创建可视化大屏

经过上述《流数据处理：通过StreamSQL分析用户行为》章节创建的流式任务，我们可以创建酷炫的可视化大屏展示网站实时流量统计情况，为了便于大家快速掌握DataV的使用，请使用事先准备好的AnalyticDB数据源。

进入DataV管理控制台

点击进入DataV可视化管理控制台。

添加数据源

• step1：进入DataV管理控制台，点击左侧菜单中我的数据。

• step2：点击+添加数据，跳出新建数据对话框。
• step3：配置数据类型为AnalyticDB、名称、域名、用户名/密码、端口和数据库，并点击测试连接。

具体数据源配置项如下：

• 数据源类型：AnalyticDB
• 名称：workshop
• 域名：workshop-demo-114ae71f.cn-hangzhou-1.ads.aliyuncs.com
• 用户名：LTAICO76WC1rREmW
• 密码：a89c1T96KMA2tOrEnb0SiBOA7GMMP3
• 端口：10078
• 数据库：workshop_demo

创建DataV可视化大屏

• step1：点击左侧我的可视化，进入配置大屏操作。

• step2：点击流式数据实战进入大屏编辑界面。

此处大屏模板由永翎（DataV产品经理）亲自操刀为此次Workshop量身定制，大家直接进入配置界面即可。

• step3：依次配置PV变化趋势（折线图）、访问设备来源（饼图）、实时访问数量（数字翻牌器）、2D平面地图和来源站点排名（轮播列表柱状图）。
• step3.1：点击折线图，进入配置PV变化趋势（折线图）页面。

首先配置样式，由于输入的数据格式为2014021206，但是我们需要在折线图中显示各个小时的数据，格式为02时的样式，那么需要在样式>x轴的轴标签中进行设置数据格式和显示格式。

• 数据格式：%Y%m%d%H（需要手工输入并回车确认）
• 显示格式：选择02(时)

其次，开始配置数据如下：

字段x映射为pv_time，y映射为pv_count，数据库类型选择数据库，选择数据库为workshop（刚创建的数据源名称）在SQL底部勾选自动更新，设置每5秒请求一次。编写SQL如下。

附：SQL说明

SELECT
  pv_time,
  pv_count
FROM
  pv_perhour;

• step3.2：同样点击访问设备来源（饼图）进入数据配置页面，配置信息如下。

字段x映射为pv_device，y映射为pv_count，数据库类型选择数据库，选择数据库为workshop（刚创建的数据源名称）在SQL底部勾选自动更新，设置每5秒请求一次。编写SQL如下。

附：SQL说明

SELECT
  pv_device,
  pv_count,
  pv_date
FROM
  device_dist;

• step3.3：配置实时访问数量（数字翻牌器）如下。

字段value映射为pv_count，数据库类型选择数据库，选择数据库为workshop（刚创建的数据源名称），在SQL底部勾选自动更新，设置每5秒请求一次。编写SQL如下。

SELECT
  pv_count,
  pv_time
FROM
 pv_day;

• step3.4：点击中间的2D地图，并点击进入区域热力层，具体配置如下。

字段映射关系通过在SQL中利用as方式声明，其中，数据库类型选择数据库，选择数据库为workshop（刚创建的数据源名称），在SQL底部勾选自动更新，设置每5秒请求一次。编写SQL如下。

select
  aaa.region_code,
  aaa.region_count as value,
  bbb.id as id,
  bbb.name,
  bbb.lat,
  bbb.lng,
  concat(bbb.name, ": ", aaa.region_count) as info
from
  region_map aaa
join
  province_code bbb
on
  aaa.region_code = bbb.province_name;

• step3.5：同上，点击进入流式气泡层，具体配置如下。

字段映射关系通过在SQL中利用as方式声明，其中，数据库类型选择数据库，选择数据库为workshop（刚创建的数据源名称），在SQL底部勾选自动更新，设置每5秒请求一次。编写SQL如下。

select
  aaa.region_code,
  aaa.region_count as value,
  bbb.id as id,
  bbb.name,
  bbb.lat as lat,
  bbb.lng as lng,
  concat(bbb.name, ": ", aaa.region_count) as info
from
  region_map aaa
join
  province_code bbb
on
  aaa.region_code = bbb.province_name;

• step3.6：点击来源站点排名（轮播列表柱状图），点击进入流式气泡层，具体配置如下。

字段映射关系通过在SQL中利用as方式声明，其中，数据库类型选择数据库，选择数据库为workshop（刚创建的数据源名称），在SQL底部勾选自动更新，设置每5秒请求一次。编写SQL如下。

select
  pv_count as value,
  concat(pv_refer, "---", pv_count) as content
from
 refer_dist;

• step4：点击右上角预览，查看大屏效果，会看到数据实时的刷新。

发布大屏

通过发布操作可以将制作好的大屏分享别人查看。

• step1：点击右上角发布，弹出发布对话框。

• step2：打开发布按钮会生成链接.

复制生成的URL即可共享你的大屏作品，观看制作的流式数据大屏。其他严重密码、验证Token可以参考更多教程来完成，此处将不赘述。

到此为止，相信大家一定程度掌握了阿里云数加流式处理的解决方案，包括DataHub、StreamCompute到最后的DataV大屏展示。更多内容请大家持续关注文章的更新和后续的workshop内容出品。