下拉选择联动 API:按地区切换数据大屏
本教程以地区切换为例。前提是业务接口支持根据 area 参数返回不同数据;DAV-BI 负责传递当前选择与展示结果,不会替接口实现地区统计。
第一步:建立变量
在项目环境变量中创建 area,初始值设为 east。标题可填写「当前地区」。
第二步:配置 API
创建 API 数据源,将 URL 设为实际业务接口,例如:
https://api.example.com/sales?area={{ area | default: "all" | url_encode }}
先运行并确认结果、数据路径与字段。完成图表绑定,确保没有筛选组件时也能显示初始数据。
第三步:添加下拉选择
加入「下拉选择」组件,把「绑定环境变量」设为 area。手动添加选项:
| 显示文本 | 值 |
|---|---|
| 东区 | east |
| 西区 | west |
| 全部 | all |
选项值应与接口约定一致。显示文本可以面向用户,实际提交值保持稳定。
第四步:保存并预览
在预览中依次选择东区、西区,核对接口返回与图表变化。使用清空选择时,组件会把变量设为空,模板默认值可以接管该情况。
变量更新后会请求 API 数据源刷新;同时存在多个 API 数据源时,它们都可能参与更新,应结合接口承载能力安排页面。
不能联动时
确认变量已创建且名称一致;检查下拉值是否被接口接受;运行 API 排除 JSON 路径问题;最后核对图表的使用数据与字段。不要把修改了下拉显示文字,当作实际请求参数已经改变。