组件数据源设置
在大屏编辑器中,组件不仅展示静态效果,还需要绑定数据源以实现动态展示。
系统支持 静态数据、动态请求 和 公共接口 三种数据源配置方式,满足不同业务场景需求。
1. 数据源配置入口
- 位置:选中组件后,在右侧属性面板切换至 数据 标签页。
- 适用范围:大多数组件(图表类、指标类、列表类等)支持数据源绑定。
- 数据格式:不同组件要求的数据格式可能略有不同,面板中会给出参考示例。
2. 数据源类型
(1)静态数据
- 定义:直接在编辑器中填写或上传数据,数据固定不变。
- 适用场景:
- 演示大屏时的示例数据。
- 数据源尚未准备好,但需要提前搭建大屏结构。
配置方式
普通组件(如文字、数值组件)
- 在编辑器中输入 JSON 格式数据。
- 可参考系统提供的默认示例。
图表和表格组件
- 提供 可视化表格修改方式,用户可直接在属性面板中通过表格编辑界面录入数据,而无需手动编写 JSON。
支持 上传本地文件或 导入平台文件(
xls
/xlsx
/csv
),系统会自动解析文件内容,并填充到组件的数据表格中。文件需符合平台提供的模板格式,确保列字段和数据结构一致。
(2)动态请求
定义:动态请求是对单组件的数据进行接口调用,如您多个组件数据只需要调用一个接口时,请用【公共接口】进行配置。
选中您要配置的图表,点击【编辑配置】即可打开接口配置页面。
全局公共配置
全局公共配置可以配置全局的地址前缀,以及设置默认更新间隔,是唯一的,如果您的数据接口来源于同一个地址,可以优先设置全局公共配置来减少工作量。
- 如下图,我设置了全局公共配置、刷新间隔,那我配置接口参数时,前缀统一为配置的全局公共地址。
- 全局公共配置设置的刷新间隔为默认刷新间隔,如配置页设置了刷新间隔,则配置页刷新间隔优先。
配置接口参数
根据您的传输方式完成配置,因为跨域无法访问时需要勾选【服务器代理请求】,「key」和「value」若需要使用全局变量可用 { } 包裹来使用。
⚠️注意:配置接口参数按要求配置,数据格式最好和 mock 返回格式一致,mock 接口在开发环境能够看到并使用。
接口格式说明:
declare interface MyResponseType{
code: number // Pro 中需要返回 0(必须)
msg: string // 自定义描述信息(非必须)
data: any //数据能放在这里最好(必须)
}
接口格式案例:
{
"code": 0,
"msg": "success",
"data": {
"key1": "value1",
"key2": "value2",
}
}
返回的数据需在 **data**
对象里,如果无法保证,请使用页面的【过滤器】来做提取处理,没有 **data**
字段,需从过滤器的 **res**
中去获取。
过滤器
过滤器一般使用在以下三种情况:
- 接口格式不符合要求时,如上文中的配置;若格式不符合要求,请使用‘res’字段进行处理。
- 需要处理数据时;例如:您数据里的值为0.1,但是您在数据图标中想要展示数据为10时,就可以在过滤器里进行参数的转换。
- 需要根据接口值,执行代码时,如您需要自定义您的业务功能,就可以在这里自定义您的业务交互方式。您也可以在【事件】-【交互事件配置】中完成您的业务交互逻辑。
发送请求
完成保存后,您需要手动点击发送请求,测试您的接口是否调用成功。
适用场景:
需要实时刷新数据的业务指标、图表组件。
(3)公共接口
定义:公共接口与动态接口配置项一样,如下图,您可以创建多个公共接口(当接口被选中时,不会出现删除按钮)您可以将一个接口复用给多个组件,从而减少接口请求。
选择公共接口后,需要在数据过滤处理您的公共接口数据展示信息,这里可以选择全局过滤器,也可以对该组件新建过滤器。
优势:
- 接口统一维护,减少重复配置。
- 支持多人协作共享,提升复用性。
配置方式:
- 在组件数据源配置中选择 公共接口。
- 从接口列表中选择需要绑定的接口,即可快速复用。
详细教程:请联系产品技术支持,获取接口调用文档。
4. 使用技巧
- 开发阶段用静态数据,发布阶段切换动态请求,提高开发效率。
- 合理设置刷新间隔,避免接口压力过大。
- 推荐使用公共接口,保证多人协作时的数据一致性与复用性。
- 接口返回结构需与组件要求格式匹配,否则数据可能无法正常展示。
- 表格/图表推荐用文件上传,批量导入效率更高,避免手工录入错误。
示例场景
- 静态数据:统计演示大屏,提前录入示例统计数据,或上传 Excel 文件批量填充表格。
- 动态请求:实时监控大屏,定时请求接口获取传感器数据。
- 公共接口:公司统一维护的天气接口,多个大屏可直接调用。