模板学堂丨妙用Tab组件制作多屏仪表板并实现自动轮播

news2024/9/19 15:18:04

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场(https://dataease.io/templates/)。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表板模板,并在优质模板的基础上轻松制作自己的仪表板。

2023年2月上新模板

DataEase模板市场定期进行模板上新。2023年2月共上新5个模板,涉及能源、测试、采购、消费等主题,欢迎大家在DataEase模板市场下载使用。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

模板技巧

本月为大家推荐的模板技巧是如何使用DataEase的选项卡组件(即Tab组件)实现多个大屏轮播的效果。

不少用户在实际使用DataEase时都会产生多个大屏同时使用并展现的需求,而给每个大屏配置一个单独的显示设备并不是一个现实的方法,那么就需要在一个显示设备上实现多个大屏轮播的效果。在DataEase开源数据可视化分析平台上,只需要简单的一个选项卡组件(即Tab组件),就可以轻松满足用户在大屏展示时多个仪表板并按照固定时间轮播的需求。

本次模板技巧涉及到的功能背景如下:

■ DataEase选项卡组件(即Tab组件)支持放入多个其他类型组件,可以在Tab组件中创作多个不同的仪表板;

■ 通过Tab组件的轮播功能可实现不同Tab页的轮播效果。

方法介绍

■ 方法一:将选项卡组件大小设置为与仪表板大小相同,将选项卡作为仪表板的画布来使用,在每个选项页下完成独立完整的仪表板的制作;

■ 方法二:将选项卡组件大小设置为与仪表板大小相同,再将网页组件放入到选项卡组件中,同样将大小设置为与仪表板页面相同大小,网页组件中配置对应已做好的仪表板公共链接。

操作演示

一、方法一操作过程

1.将选项卡组件拖入到仪表板中;
在这里插入图片描述

2.将选项卡组件的大小设置为与仪表板同样大小;
在这里插入图片描述

3.在每个Tab标签页下的空间中放入需要的各类视图和组件,制作完整的仪表板;
在这里插入图片描述

4.开启轮播,并配置轮播间隔时间;
在这里插入图片描述

5.预览仪表板,查看自动轮播效果。
在这里插入图片描述

二、方法二操作过程

方法二需要满足以下两个条件才可实现:

■ 各个需要轮播的仪表板均单独存在,且已制作完成;

■ 各个仪表板在安全性控制上支持创建公共链接,即可以通过创建的公共链接进行无密码访问。

1.将选项卡组件拖入到仪表板中;
在这里插入图片描述

2.将选项卡组件的大小设置为与仪表板同样大小;
在这里插入图片描述

3.在每个选项卡组件中放入一个网页组件,也将其大小调整为屏幕大小;
在这里插入图片描述

4.分别对想要统一轮播的仪表板创建公共链接,并配置在网页组件中;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.开启轮播并配置轮播间隔时间;
在这里插入图片描述

6.预览仪表板,查看自动轮播效果。
在这里插入图片描述

总结

DataEase开源数据可视化分析工具中很多功能用法是具有多样性的。以选项卡组件轮播功能为例,除了上述用法外,您还可以通过在不同的Tab页下放置不同的图片实现图片轮播等效果。此外,关于实现大屏的轮播也有一些外部辅助的方式,例如通过Chrome浏览器的Revolver-Tabs插件来实现浏览器不同标签页的轮播效果。

DataEase致力于和大家一起探索新的功能和效果实现,通过持续的迭代做出更好的产品,满足个人和企业用户更为多元化的场景需求,努力实现“人人可用”的目标。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/393708.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2021年MathorCup数学建模D题钢材制造业中的钢材切割下料问题全过程文档及程序

2021年第十一届MathorCup高校数学建模 D题 钢材制造业中的钢材切割下料问题 原题再现 某钢材生产制造商的钢材切割流程如图 1 所示。其中开卷上料环节将原材料钢卷放在开卷机上,展开放平送至右侧操作区域(见图 2)。剪切过程在剪切台上完成&…

如何使用 NFTScan NFT API 检索单个 NFT 资产

一、什么是 NFT API API 是允许两个应用组件使用一组定义和协议相互通信的机制。一般来说,这是一套明确定义的各种软件组件之间的通信方法。API 发送请求到存储数据的服务器,接着把调用的数据信息返回。开发者可以通过调用 API 函数对应用程序进行开发&…

Qt 单例模式第一次尝试

文章目录摘要单例模式如何使用Qt 的属性系统总结关键字: Qt、 单例、 的、 Q_GLOBAL_STATIC、 女神节摘要 世界上第一位电脑程序设计师是名女性:Ada Lovelace (1815-1852)是一位英国数学家兼作家,她是第一位主张计算机不只可以用来算数的人…

【安装mxnet】

安装mxnet 通过创建python3.6版本的虚拟环境安装mxnet 1、安装anaconda 2、打开Anaconda prompt 3、查看环境 conda env list conda info -e 4、创建虚拟环境 conda create -n your_env_name python3.6 5、激活或者切换虚拟环境 activate your_env_name 6、安装mxnet,下面两…

规划数据指标体系方法(中)——UJM 模型

上文我跟大家分享了关于规划数据指标体系的 OSM 模型,从目标-战略-度量的角度解读了数据指标的规划方法,今天来跟大家讲一讲另一种规划数据指标体系的方法——UJM 模型。 了解 UJM UJM 模型,全称为 User-Journey-Map 模型,即用户…

日常文档标题级别规范

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…

使用 try-catch 捕获异常会影响性能吗?大部分人都会答错!

使用 try-catch 捕获异常会影响性能吗?大部分人都会答错!前言一、JVM 异常处理逻辑二、关于JVM的编译优化三、关于测试的约束四、测试代码五、解释模式下执行测试六、编译模式测试七、结论前言 不知道从何时起,传出了这么一句话:…

web实现环形旋转、圆形、弧形、querySelectorAll、querySelector、clientWidth、sin、cos、PI

文章目录1、HTML部分2、css部分3、JavaScript部分4、微信小程序演示1、HTML部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&l…

Java定时器Timer的使用

一、Timer常用方法 Timer应用场景&#xff1a; 1、每隔一段时间执行指定的代码逻辑&#xff08;即按周期执行任务&#xff09; 2、指定时间执行指定的代码逻辑 为方便测试并查看运行效果&#xff0c;首先先建一个类并继承TimerTask&#xff0c;代码如下: package timerTest…

[2.1.4]进程管理——进程通信

文章目录第二章 进程管理进程通信&#xff08;IPC&#xff09;为什么进程通信需要操作系统支持&#xff1f;&#xff08;一&#xff09;共享存储&#xff08;1&#xff09;基于存储区的共享&#xff08;2&#xff09;基于数据结构的共享&#xff08;二&#xff09;消息传递什么…

程序员的逆向思维

前要&#xff1a; 为什么你读不懂面试官提问的真实意图&#xff0c;导致很难把问题回答到面试官心坎上? 为什么在面试结束时&#xff0c;你只知道问薪资待遇&#xff0c;不知道如何高质量反问? 作为一名程序员&#xff0c;思维和技能是我们职场生涯中最重要的两个方面。有时候…

RWEQ模型的土壤风蚀模数估算、其变化归因分析

土壤风蚀是一个全球性的环境问题。中国是世界上受土壤风蚀危害最严重的国家之一&#xff0c;土壤风蚀是中国干旱、半干旱及部分湿润地区土地荒漠化的首要过程。中国风蚀荒漠化面积达160.74104km2&#xff0c;占国土总面积的16.7%&#xff0c;严重影响这些地区的资源开发和社会经…

使用pprof分析golang内存泄露问题

问题现象 生产环境有个golang应用上线一个月来&#xff0c;占用内存不断增多&#xff0c;约30个G&#xff0c;这个应用的DAU估计最多几十&#xff0c;初步怀疑有内存泄露问题。下面是排查步骤&#xff1a; 分析 内存泄露可能点&#xff1a; goroutine没有释放time.NewTicke…

【前端学习】D2-2:CSS基础

文章目录前言系列文章目录1 Emmet语法1.1 快速生成HTML语法结构1.2 快速生成CSS样式语法1.3 快速格式化代码2 CSS复合选择器2.1 什么是复合选择器2.2 后代选择器&#xff08;*&#xff09;2.3 子选择器2.4 并集选择器&#xff08;*&#xff09;2.5 伪类选择器2.6 链接伪类选择器…

企业文件数据泄露防护(DLP)

什么是数据丢失防护 数据丢失防护 &#xff08;DLP&#xff09; 是保护数据不落入坏人之手的做法。如今&#xff0c;数据传输的主要问题是使大量数据容易受到未经授权的传输。通过设置足够的安全边界&#xff0c;您可以控制数据在网络中的移动。由于您的数据非常有价值&#x…

Java方法的使用

目录 一、方法的概念及使用 1、什么是方法(method) 2、方法定义 3、方法调用的执行过程 4、实参和形参的关系 二、方法重载 1、为什么需要方法重载 2、方法重载概念 3、方法签名 三、递归 1、递归的概念 2、递归执行过程分析 一、方法的概念及使用 1、什么是方法(met…

MySQL 字符串函数

点击上方蓝字关注我平生文字为吾累&#xff0c;此去声名不厌低。 寒上纵归他日马&#xff0c;城中不斗少年鸡。MySQL提供了许多常用的字符串函数&#xff0c;以下是其中一些常用的字符串函数和用法&#xff1a;CONCATCONCAT函数用于连接两个或多个字符串。以下是一个示例&#…

MGAT: Multimodal Graph Attention Network for Recommendation

模型总览如下&#xff1a; 图1&#xff1a;多模态图注意力网络背景&#xff1a;本论文是对MMGCN&#xff08;Wei et al., 2019&#xff09;的改进。MMGCN简单地在并行交互图上使用GNN&#xff0c;平等地对待从所有邻居传播的信息&#xff0c;无法自适应地捕获用户偏好。 MMGCN…

Qt学习5-Qt Creator文件操作(哔站视频学习记录)

实现文件编辑器代码 目录 一、代码要点 二、重点函数 1、conncet 2、getOpenFileName 3、getSaveFileName 4、读取文件到textEdit 5、textEdit保存到文件 三、全部代码 mainwindow.h mainwindow.cpp 一、代码要点 MainWindow的菜单栏实现&#xff1b;connect函数连接…

【Linux】理解Linux环境变量

&#x1f34e;作者&#xff1a;阿润菜菜 &#x1f4d6;专栏&#xff1a;Linux系统编程 初识环境变量 什么是环境变量 我们平常所用的Linux指令其实也是可执行程序&#xff0c;和我们自己写的二进制程序没什么两样&#xff0c;那么为什么我们在执行自己的程序的时候需要加上 ./…