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

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