脚本库详细说明 - 大屏云极简使用手册

 💡 大屏云(www.dapingyun.com)是一款制作可视化数据大屏的在线搭建工具服务，组件丰富，开箱即用，无需编码及导入数据，极大程度满足用户会议展览、业务监控等需求。

线上demo地址：https://demo.dapingyun.com

 

通过js脚本库的加入，大屏项目在UI交互方面，可以呈现更加丰富的时序、交互业务效果。

👉 本文以快速精简的方式对大屏云组件库的使用进行说明。

1、添加脚本库

在管理后台[资源库] - [脚本库]中，维护当前账户下的js脚本。如下：

 

其中所属项目、脚本标记、脚本代码3个属性进行说明如下：

• 所属项目：表示将当前脚本添加至选中项目下
• 脚本标记：设置脚本的名称，便于记忆
• 脚本代码：以系统可支持的方式进行js代码编写，支持jQuery

2、脚本示例

对初始化默认大屏的“累计数据”组件（也可以选择[指标类] - [LED数字图]组件）为例，进行脚本编码，如下图：

 

我们的需求假定为：每次点击该组件后，随机显示数字。脚本代码如下：

?

1 2 3 4 5 6 7 8

//下面代码中的582452大需要根据当前的组建ID设置： $(document).delegate(".visual[component-id='582452']","click",function(){      $(this).find(".promotion_006_ele_num_item img").each(function(){          var num = Math.floor((Math.random() * 10));          var url = "https://h2hlgn.dapingyun.com/img/visual/web/component/promotion/006/"+num+".png"          $(this).attr("src",url);      }) })

　　

上述脚本代码做了两项业务：组件事件绑定、循环随机替换数字，完成了我们的假定需求。

参照该简单示例，你可以根据实际的业务需求出发，编写出如何条件的脚本交互使用。

---

 📒 欢迎使用大屏云

欢迎使用大屏云，有任何问题，请添加微信/QQ，谢谢。

微信：imshulinwu

QQ：246937882