DataShow导出大屏代码包介绍以及二次开发说明

  • 2025-12-23 11:15:19

代码包说明

DataShow编辑器支持将制作好的大屏导出为【html+css+js】的网页代码包,可用于内网使用,也可发布到自己的服务器上,代码支持数据逻辑二次开发,具体看下方章节详细说明,导出的代码永久有效。

⚠️注意:此功能仅在客户端软件上开放,只支持本地数据大屏的代码导出,钻石会员及以上解锁此功能

如何导出代码

  1. 点击顶部【导出代码】按钮
  2. 选择文件位置保存即可


代码包截图

导出的代码解压后如下图所示,双击index.html可以直接运行,【推荐谷歌浏览器】


二次开发说明

⚠️说明:大部分情况下都不需要二次开发,编辑器上支持配置api接口、支持配置生成虚拟动态数据。导出的代码仅支持数据层面的二次开发,展示层代码高度压缩无法二开,若要调整则需要在编辑器上修改完样式再进行导出。
通告:如果您必须要自定义开发数据,必须自身具备前端javascript开发能力,本平台不提供二次开发相关的培训,指导等。


第一步:找到自定义js文件【其他文件切勿修改】


第二步:自定义数据逻辑【custom.data.js开发】


这个文件只有一个_DS_DATA对象,

window._DS_DATA = {
    enable: true, // 是否开启数据自定义,如果要自定义请设置为true
    dataSet: {} // 数据集: 大屏中每个组件的数据,key为编辑器中设置的数据集名称,value为组件数据必须和编辑器中静态数据格式一致
}


  • enable属性:布尔值  是否开启数据自定义

首先要将enable属性改为true,默认是false。这里改成true之后编辑器上面配置的静态数据,api、虚拟数据等都将会失效,自定义逻辑优先级最高。

  • dataSet属性:对象类型 对应大屏上每个组件的数据,key为编辑器中设置的数据集名称,value为组件数据必须和编辑器中静态数据格式一致

1. 编辑器上命名数据名称    


2.名称命名好之后,就能在custom.data.js里设置数据,数据结构要和编辑器中静态数据保持一致

这里每隔5秒随机变化数据,具体逻辑可以任意自定义,dataSet变化时,页面上对应的组件将会更新数据