使用阿里云dataV实现大屏自动轮播

简介: 使用阿里云dataV实现大屏自动轮播进行动态展示

使用阿里云dataV实现大屏自动轮播

使用阿里云dataV实现大屏自动轮播进行动态展示

配置步骤

Step1:添加iframe组件,放大到全屏
image.png

Step2:添加时间轴组件,放到画布之外,用来触发定时回调事件。
image.png

然后配置好回调ID,这样大屏中其他组件就能收到事件以及这个ID

image.png

Step3:在时间轴组件的数据配置中,加入刚配置的回调ID,编号为1、2、3。
这样每次定时触发事件时,都能往外带上这个编号,目的是实现iframe不同页面链接的切换
image.png

Step4:准备数据。将需要轮播的大屏发布链接保存到自己的数据库。
Id编号与刚才回调Id中配置一致
image.png

测试你的sql语句

image.png

Step5:配置iframe的数据,数据源选择刚连接的数据库,将回调id填入where语句作为条件
image.png
最后:配置成功后预览查看轮播效果
image.png

相关实践学习
基于Hologres轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集,通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析,同时使用DataV内置模板,快速搭建实时可视化数据大屏,从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
21天前
|
人工智能 自然语言处理 数据可视化
别再用Excel死磕了!阿里云QBI+DataV才是政企报表的正确打开方式
阿里云Quick BI与DataV联合打造数据智能解决方案,覆盖数据分析、可视化及数字孪生全链路。QBI以智能分析驱动决策,DataV提供低代码可视化与三维孪生能力,助力政企高效实现数据驱动创新。
|
7月前
|
人工智能 数据可视化 数据挖掘
DataV AI 智慧升级 | 更懂大屏更懂你
DataV AI 智慧升级 | 更懂大屏更懂你
189 2
|
7月前
|
数据可视化 关系型数据库 定位技术
全面支持国产部署,阿里云DataV重磅推出空间数据新方案!
全面支持国产部署,阿里云DataV重磅推出空间数据新方案!
|
11月前
|
SQL 数据可视化 关系型数据库
阿里云DataV“山海计划” x Epic Fab:“中国风AIGC”助力智慧城市建设
DataV“山海计划”根据中国城市规划特色,建立城市地块、建筑、道路等“城市要素知识库”,基于AI大模型技术生成更贴近“中国特色”的城市场景。基于DataV“山海计划”的UE引擎插件已经登陆Epic Fab,广大UE引擎开发者可以通过该插件免费体验城市历史悠久的广州场景三维资产。除了三维城市场景生成,DataV为智慧城市提供完整的数据看板解决方案,提供200+基础图表、支持API、MySQL、SQL Server、人大金仓、达梦等30+数据源,通过DataV与UE引擎,广大开发者可以低成本获得“智慧城市”开发方案,将更多精力放在满足用户业务需求上,从而提升智慧城市项目的交付质量。
592 3
|
人工智能 数据可视化 数据挖掘
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
1160 2
react+datav+echarts实现可视化数据大屏
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
1682 1
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
1063 0
|
数据可视化 JavaScript API
vue2+datav可视化数据大屏(2)
接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
613 0
|
数据可视化 前端开发
DataV图表-排名轮播表自定义
DataV图表-排名轮播表自定义
2298 1