当前位置: 首页 > Web前端 > JavaScript

让我们来看看这个数字大屏幕的低代码实现

时间:2023-03-27 17:58:47 JavaScript

依托强大的物源开发平台,可以快速实现数字大屏,各种炫酷的联动效果。DEMO地址:https://previewer.wuyuan.io/p...配置地址:https://workbench.wuyuan.io/p...点击城市后会触发各图表联动,并自己补效果:效果图1效果图2实现步骤1、完成大屏的基本布局。使用主窗口作为背景,层数设置为0。对于其他窗口,将层数设置为1,窗体背景选择无,标题背景设置为透明。2.绑定合适的组件并为每个从属窗口设置数据源。让它依赖主窗口或其他窗口提供的@variable@,系统会自动形成联动效果。本例中使用的组件是enhancer-echarts和enhancer-numbers组件。3.添加必要的样式,覆盖或移除不需要的组件样式。本例中添加如下CSS内容,为每个窗口添加相框。可以根据实际情况设置样式加载的时机,比如frame初始化的时候。#page页码.zwindow{box-shadow:none;溢出:可见;}#page页码.zwindow-header{box-shadow:none;}#page页码.zwindow-body{box-shadow:none;边框-顶部:无;溢出:可见!重要;}#pagepagenumber.zwindow-header:before{content:'';位置:绝对;z-指数:33;顶部:-3px;左:-6px;高度:12px;宽度:18px;左边框:纯色2px#666;border-top:solid2px#666;}#pagepagenumber.zwindow-header:after{content:'';位置:绝对;z-index:33;顶部:-3px;右:-6px;高度:12px;宽度:18px;border-right:solid2px#666;border-top:solid2px#666;}#pagepagenumber.zwindow-body:before{内容:'';位置:绝对;z-指数:33;底部:-3px;左:-6px;高度:12px;宽度:18px;左边框:纯色2px#666;}#pagepagenumber.zwindow-body:after{content:'';位置:绝对;z-指数:33;底部:-3px;右:-6px;高度:12px;宽度:18px;border-right:solid2px#666;border-bottom:solid2px#666;}其他说明本例中后台主窗口使用自定义窗口,包括百度地图扩展echarts实现,需要提前引入地图依赖的echarts.js全局配置-前端: