给你的 DataV 可视化大屏生成 uuid

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 当我们编辑完成一个 DataV 可视化项目之后,就可以发布该项目,然后通过分享链接分享出去。此时,你的可视化项目可以不断更新数据,从而让观看的人可是看到最新的可视化数据: 不过,如果你的 API 接口只是简单的无状态接口,那么 API 接口的服务端是无法区分发起数据请求的到底是同一个大屏页面还是不通的大屏页面的。

当我们编辑完成一个 DataV 可视化项目之后,就可以发布该项目,然后通过分享链接分享出去。
此时,你的可视化项目可以不断更新数据,从而让查看大屏的人看到最新的可视化数据:

a5debfb4e942481e7a588c008350715b7017a82d

不过,如果你的 API 接口只是简单的无状态接口,那么 API 接口的服务端是无法区分发起数据请求的到底是同一个大屏页面还是不通的大屏页面的。
如果你的服务端希望知道每个大屏的页面都有一个不同的标志,从而可以区分发起这个数据请求的大屏是不是不同的页面,那么我们可以通过时间轴组件来给每个大屏页面都生成一个 uuid 座位 API 的参数,这个 uuid 每次新打开的页面都会重新生成,那么 API 的服务端就可以使用这个 uuid 作为依据判断一个请求是否是同一个页面的请求了。

步骤

  1. 首先添加一个时间轴组件
  2. 在时间轴的数据面板里填写初始化数据, 并把 value 映射我 UUID
    4ae7b6ca0c82d07a9530fd3c92bf1035411c8b3d
  3. 给时间轴组件添加过滤器,在过滤器里生成 UUID
    aaadb3c48810a5dcc862f4acedeff05c701bb5a2

过滤器生成 UUID的代码可以自己实现,也可以参考:

var str = "",
    range = 20,
    arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  for(var i=0; i<range; i++){
    var pos = Math.round(Math.random() * (arr.length-1));
    str += arr[pos];
  }
  str += Date.now();
return [
  {
    UUID: str
  }
];

查看响应结果:
1af4194df73b0643ddc5e59184cf0599799f8844
可以看到生成的 UUID

  1. 时间轴的样式配置里取消轮播:
    cc300e7e5f9aa8440664d0a02272f20a68917f35

回调 ID 设置为 UUID:
a6ec633ddcb8512dc39d57d8a5f253d15f3d732e

  1. 其他组件正常使用 API 数据源:
    ff5614fb06073c2796b60e90671c8c9dfd8f4140
  2. 打开预览页面,可以看到对 API 的请求带上了 UUID 参数:

7df5c58b0e8041842fe1791aa942e6b1c23bd999

这样,服务端就可以针对每个不同的大屏页面组织返回数据了,比如模拟推流数据,每个打开的屏幕都可以依次获取数据而不会重复、遗漏等。

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
4月前
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
5月前
|
数据可视化 搜索推荐 atlas
DataV Atlas深度解析与实战应用:打造个性化地理信息可视化
阿里云DataV的Atlas功能专注于地理信息可视化,提供范围选择、边界生成和层级展示等工具,助用户轻松创建专业地图应用。通过代码示例展示了如何用Geo组件展示中国省份销售数据,强调了数据安全和性能优化的重要性。DataV Atlas简化了复杂地理信息的展示,提升了数据洞察的直观性和美感。【6月更文挑战第19天】
561 3
|
6月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
500 2
react+datav+echarts实现可视化数据大屏
|
6月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
769 1
|
6月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
475 0
|
6月前
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
278 0
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
734 0
|
资源调度 数据可视化 JavaScript
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
1370 0
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
|
数据可视化 Windows
DataV 可视化演播厅,让汇报进入“一秒”时代
可视化演播厅是 DataV 7.0 版本中新增的重磅功能,带来全新的数据汇报演示体验。
DataV 可视化演播厅,让汇报进入“一秒”时代
|
SQL 数据可视化 数据库
使用阿里云dataV实现大屏自动轮播
使用阿里云dataV实现大屏自动轮播进行动态展示
1731 0
使用阿里云dataV实现大屏自动轮播