组件简介 - 大屏云极简使用手册

13,791 阅读2分钟

组件是酷炫大屏的重要组成部分,大屏系统前台页面大部分都是采用组件化的方式。用户按需选择合适的大屏组件,实现多样化的大屏功能展示页面。

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

1、组件选择

在大屏设计页面,在每一个组件上面鼠标悬浮时,会弹出功能按钮遮罩框,我们点击“组件设置”后,弹出组件选择库。在组件树型列表中,选择符合需求的组件,即可对当前组件进行替换。如下图:

1.png 我们对上述表单中标题、名称、扩展参数3个属性进行说明:

  • 标题: 该标题会显示在页面该组件的标题栏上
  • 名称: 系统随机生成长度为32的字符串,不可更改。为该组件的识别符之一,用来进行数据交互、对接
  • 扩展参数: 对组件进行微调的参数设置如: "smooth": false,表示曲线图中,线段为平滑曲线

具体可参考后台系统[资源库] - [组件库]中使用说明。

2、数据结构

点击“数据结构”按钮,会弹出当前组件的数据结构页面,列出了该组件使用的内置默认数据。如下图:

2.png 数据的定义为json格式,该组件的默认数据如下:

{
    "x_name": [ "星期一", "星期二", "星期三","星期四", "星期五", "星期六", "星期日" ],
    "data": [ [30,20,60,45,70,80,60],[70,30,45,80,60,20,60]],
    "data_name": ["PM2.5","PM10"]
}

分别表示x轴名称、数据、数据名称。其中,data字段为列表,子列表分别表示每一条线段。

在设计模式下,修改上述数据就可以完成对该组件默认数据的修改。

我们可根据业务需求和数据的频度决定是用静态数据(即修改上述数据,并进行提交),还是进行数据的动态对接。

3、组件文档

在后台系统的资源库中,我们可以浏览系统中当前用户可见的组件,查看组件的使用说明,除了上一节讲到的数据结构之外,组件文档还对组件参数的定义,包括扩展参数进行了说明,如下图:

3.png

欢迎使用大屏云

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

微信:imshulinwu QQ:246937882