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

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

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

1、组件选择

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

 

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

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

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

2、数据结构

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

 

数据的定义为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、组件文档

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

 

---

📒 欢迎使用大屏云

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

 

          微信：imshulinwu                                                        QQ：246937882