15分钟构建超低成本数据大屏:DataV + DLA

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: ## 第一步:准备低成本存储的业务数据和DLA表 * OSS([https://www.aliyun.com/product/oss](https://www.aliyun.com/product/oss))是云上低成本数据存储的优选方案 * DLA([https://www.

第一步:准备低成本存储的业务数据和DLA表

参考如下文档使用案例,准备OSS上存储的业务数据和DLA表:
https://yq.aliyun.com/articles/623282

此步骤预计耗时:5分钟。

第二步:使用DataV访问DLA制作数据大屏

1. 准备DataV

以第一步中的业务数据为例,构建企业销售数据大屏,本大屏主要涉及三张表:

  • orders表,销售订单数据;
  • customer表,客户记录数据;
  • nation表,国家记录数据;

登录控制台DataV控制台:http://datav.aliyun.com/data,购买基础版:

1

使用“兼容MySQL”的方式,就能连接DLA服务,本例中基础版就能满足。

2. 准备DLA数据源

点击 “我的数据”,“添加数据

2

编辑数据源:

  • 选择“兼容MySQL数据库”类型;
  • 名称按需进行命名;
  • 根据在DLA控制台https://datalakeanalytics.console.aliyun.com/overview上的链接信息(经典网络)和在阿里云站内信收到用户名、密码信息,填入相应栏目,选择目标的tpch数据库,确定保存。

3

3. 准备大屏模板

点击 “我的可视化”,“新建可视化

4

选择“销售实时监控模板”,点“创建

5

本示例大屏中,目标显示各个国家的销售数据情况,把下面标红的框内的组件删除。

6

然后为了布局,美观,重新调整一个组件在画布上的位置。

7

为了显示各个国家的销售数据情况,需要世界地图,删除现有的中国地图组件,然后在导航栏的“地图”中选择“3D平面世界地图”。

8

4. 给大屏中的组件配置数据

4.1 给地图配置数据

根据如下操作,给地图render数据:

  • 选择地图,在数据tab页面中,“数据源类型数据库选择已有数据源我的数据**”中配置的DLA数据源;
  • 在SQL中,填入如下SQL,计算按国家销售额排序的数据;
select sum(o_totalprice) total_price, n_nationkey, n_name, n_id
from orders 
join customer on o_custkey = c_custkey 
join nation on c_nationkey = n_nationkey 
group by n_nationkey, n_name, n_id 
order by total_price desc;
  • 字段id和value,分别填入上述SQL返回的n_id列和total_price列;
  • 根据业务数据更新需求(见附一:架构示意),选择大屏数据“自动更新请求”,比如60秒一次;
  • 然后点击“刷新数据”。

9

4.2 给总销售额配置数据

根据如下操作,给总销售额配置数据:

  • 选择销售总额组件,在数据tab页面中,“数据源类型数据库选择已有数据源我的数据**”中配置的DLA数据源;
  • 在SQL中,填入如下SQL,计算销售总额的数据;
select sum(o_totalprice) total_price
from orders;
  • 字段value,填入上述SQL返回的total_price列;
  • 根据业务数据更新需求(见附一:架构示意),选择大屏数据“自动更新请求”,比如60秒一次;
  • 然后点击“刷新数据”。

10

4.3 给按国家销售排名配置数据

根据如下操作,给总销售额配置数据:

  • 选择销售额国家排名组件,在数据tab页面中,“数据源类型数据库选择已有数据源我的数据**”中配置的DLA数据源;
  • 在SQL中,填入如下SQL,计算按国家销售额排序的数据;
select sum(o_totalprice) total_price, n_nationkey, n_name 
from orders 
join customer on o_custkey = c_custkey 
join nation on c_nationkey = n_nationkey 
group by n_nationkey, n_name 
order by total_price desc;
  • 字段value和content,填入上述SQL返回的total_price列和n_name列;
  • 根据业务数据更新需求(见附一:架构示意),选择大屏数据“自动更新请求”,比如60秒一次;
  • 然后点击“刷新数据”。

11

5. 预览和发布大屏

点击右上角的“预览”,可以看到大屏发布后的效果。

12

确认无误后,可以进行发布:

13

此步骤预计耗时:10分钟。

附:架构示意

和使用传统数据库加DataV构建大屏相比,DataV + DLA + OSS的方案是另外一种低成本选择,在绝大部分频率较低的数据刷新的业务大屏场景下,DataV + DLA + OSS的方式远比DataV + 传统数据库的成本低。结合业务数据的产生,整体架构示意如下:

可能的业务数据产出的大屏数据刷新链路:

  • 业务应用程序产出的增量数据,直接上传到OSS中,通过定时查询,刷新到业务数据大屏中;
  • 业务应用程序产出的业务日志,采集到日志服务中,通过定时日志投递(最小5分钟延迟),投递到OSS中,再通过定时查询,刷新到业务数据大屏中。

14

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
目录
相关文章
|
2天前
|
JSON 数据可视化 定位技术
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
7 0
|
3月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
112 0
|
3月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
|
3月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
273 1
|
3月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
160 2
react+datav+echarts实现可视化数据大屏
|
8月前
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
534 0
|
11月前
|
资源调度 数据可视化 JavaScript
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
773 0
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
|
存储 监控 数据可视化
物联网数据 DataV 演示|学习笔记
快速学习物联网数据 DataV 演示
329 0
物联网数据 DataV 演示|学习笔记
|
SQL 数据可视化 数据库
使用阿里云dataV实现大屏自动轮播
使用阿里云dataV实现大屏自动轮播进行动态展示
1486 0
使用阿里云dataV实现大屏自动轮播
|
JSON 编解码 监控
使用dataV还原销售实时监控大屏
使用dataV还原销售实时监控大屏
400 0
使用dataV还原销售实时监控大屏