大数据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内容出品。