数据源配置

大屏组件的数据来源支持静态数据和 HTTP API 两种方式。

静态数据

直接在组件属性中编写 JSON 数据，适用于固定内容或测试场景。

配置方式

1. 选中组件
2. 在属性面板「数据」标签中选择「静态数据」
3. 在编辑器中编写 JSON：

{
  "categories": ["1月", "2月", "3月", "4月", "5月"],
  "values": [120, 200, 150, 80, 270]
}

4. 点击「应用」预览数据效果

适用场景

场景	说明
标题文本	固定展示内容
数字面板	固定指标值
测试调试	开发阶段快速验证组件效果

HTTP API 数据源

通过 HTTP 接口动态获取数据，适用于实时数据展示。

配置方式

1. 在属性面板「数据」标签中选择「HTTP API」
2. 填写接口信息：

配置项	说明	示例
请求方法	GET/POST	GET
接口地址	API URL	http://localhost:8580/system/stats/sales
请求头	自定义 Header	Authorization: Bearer xxx
请求参数	Query 或 Body 参数	pageNum=1&pageSize=10
超时时间	请求超时（秒）	10

3. 配置数据映射

数据映射

将接口返回的字段映射到组件维度：

// 接口返回数据
{
  "code": 200,
  "data": {
    "list": [
      {"month": "1月", "amount": 120},
      {"month": "2月", "amount": 200}
    ]
  }
}

映射项	配置值
数据路径	data.list
X 轴字段	month
Y 轴字段	amount

鉴权配置

如果接口需要认证，在请求头中添加 Token：

Authorization: Bearer {token}

建议为大屏创建专用的 API Token，避免使用用户 Token 过期失效。

数据刷新频率

支持定时刷新数据，保持大屏数据实时性：

配置项	说明
刷新开关	是否启用自动刷新
刷新间隔	刷新频率（秒），最小 5 秒
刷新次数	限制刷新次数（0 表示无限）

刷新策略建议

场景	建议间隔
实时监控	5-10 秒
运营看板	30-60 秒
日报数据	300 秒
固定统计	不刷新

刷新频率过高会增加服务器压力，根据实际需求合理设置。

数据处理

数据过滤

支持在获取数据后进行简单过滤：

// 过滤掉 amount 为 0 的数据
data.list.filter(item => item.amount > 0)

数据排序

// 按 amount 降序排列
data.list.sort((a, b) => b.amount - a.amount)

下一步

• 大屏组件介绍
• 大屏预览与发布