【数字孪生实战案例】如何配置下拉菜单交互逻辑,实现点击选项自动切换展示图片、视频及监控画面?~山海鲸可视化

在可视化项目搭建中,常需通过下拉菜单实现素材切换展示。本文详解配置方法,帮助快速设置点击下拉选项,联动自动加载并展示对应图片、视频文件与实时监控画面,实现简洁直观的交互预览效果。

1.在左侧组件库内添加**"基础下拉菜单"** 和**"图片"** 组件至项目中, 实际场景中也可替换为**"监控"** 或者**"视频"**组件,下文以图片组件为例进行讲解。

2.选中基础下拉菜单,在右侧**"样式"** 配置栏下,选项设置修改为**"来自数据"**。

选中图片组件,在右侧**"样式"** 配置栏中找到**"图片地址"** ,点击其**"扩展选项"** 并选择**"生成数据字段"**。

这里图片地址需要转换为网络地址,可以参考此教程:如何将本地图片生成网络地址? - 数字孪生可视化产品交流社区

3.选中基础下拉菜单,在**"数据"** 配置栏勾选相应的数据,同时开启**"联动其他组件"**。

接着选中图片,在**"数据"** 配置栏勾选相应的数据,同时开启**"受其他组件联动"**。

4.选中图片组件,切换至**"数据"** 配置栏,右键勾选对应字段名称,将字段类型修改为**"字符串"**格式。

展示效果如下:

相关推荐
Patrick在香港16 小时前
Python 拉取城巴开放数据:406 条路线,香港岛巴士网络的数字画像
网络·python·数据分析·php·数据可视化·香港·开放数据
躺柒21 小时前
读数据可视化18时变数据(下)
信息可视化·时序数据库·可视化·数据可视化·实时数据库·时变数据
十三画者1 天前
【文献分享】CancerCellNet:评估癌症模型转录保真度的计算工具
人工智能·深度学习·数据挖掘·数据分析·数据可视化
躺柒1 天前
读数据可视化17时变数据(上)
信息可视化·时序数据库·可视化·数据可视化·时变数据·时变
桃西西呀2 天前
「百年一遇」的台风,为什么我这辈子就遇了好几回?概率论把这笔账算给你看
人工智能·python·数据可视化
黎阳之光2 天前
打破堆场感知黑盒:黎阳之光视频孪生,构建港口码头网格化透明管控新体系
大数据·人工智能·算法·安全·数字孪生
躺柒3 天前
读数据可视化16大规模多变量空间数据(下)
人工智能·信息可视化·可视化·数据可视化·空间·大数据分析
百年੭ ᐕ)੭*⁾⁾3 天前
Redash部署指南(Windows docker部署)
大数据·windows·docker·数据可视化·redash
图扑可视化3 天前
搭建财税资金数据管理一体化大屏开发实践
数字孪生·三维可视化·智慧金融
玄魂3 天前
VisActor 全新图可视化开源项目:VGraph
前端·数据可视化