> 使用联动可在表单中根据查询条件联动图表/表格,或是图表联动图表
[TOC]
>[danger] 联动配置仅用于动态数据的SQL和JSON数据集,静态数据及JSON数据不支持
## 1. 联动效果
以表单联动图表为例,联动表格,图表联动图表均可同样配置。
![](https://img.kancloud.cn/3e/6a/3e6addb7558dde2142ab3cb305d74e13_1897x754.png)
## 2. 配置表单查询条件
[查看表单配置专题](表单.md)
### 2.1 添加表单组件
![](https://img.kancloud.cn/15/d9/15d979cf29bf83d295e59883b3b475bf_813x173.png)
### 2.2 配置表单查询条件
* 以手动配置为例:
![](https://img.kancloud.cn/11/a8/11a8bf237bf1f6988f84f4600effbcad_1164x349.png)
* 配置完成效果:
![](https://img.kancloud.cn/e9/14/e9140c75ad05df45654a53a3e92781e7_1199x193.png)
## 3 配置图表
### 3.1 添加图表
以柱状图为例,[查看柱状图配置专题](基础柱形图.md)
![](https://img.kancloud.cn/83/ea/83ea7dc1f526fb788bf53a93addb1b08_651x218.png)
### 3.2 配置图表数据
* 图表数据配置
![](https://img.kancloud.cn/0f/e5/0fe55d25b631820aa8053df49634b66e_1128x800.png)
* 带参SQL
```
select * from demo where name like '%${name}%' and sex='${sex}'
```
![](https://img.kancloud.cn/69/05/6905483b1b8c34c159c027fec162d344_1537x613.png)
## 4 配置联动
* 点击组件右上角配置按钮“![](https://img.kancloud.cn/f5/73/f5735425ca7cd1969e01c57a316c52aa_18x19.png)”,再点击`“联动设置”`
![](https://img.kancloud.cn/5e/82/5e82f3022b4fa5f6a9cfac0a354b3045_1687x651.png)
* 可设置联动的图表会出现复选框
![](https://img.kancloud.cn/8c/d1/8cd15abb8308d33ae7b67dc6d7d386b3_1662x680.png)
* 配置联动参数
1) 选中复选框
2) 点击设置弹出参数配置
3) 点击添加追加联动映射字段
4) 设置映射字段
映射字段:表单中的查询字段,如`“姓名”`、`“性别”`
接收参数:图表数据集中的查询参数,如`“name”`,`“sex”`
![](https://img.kancloud.cn/98/ff/98ffa7cea8b4be7b1c479c522536ef27_1667x666.png)
## 5 取消联动
点击所需取消联动的组件,点击设置按钮,再点击`“清空联动”`,弹出确认取消,确认后即可取消与该组件相关联的所有联动
![](https://img.kancloud.cn/05/c7/05c7f8360b111bf857485b7d3f28673e_1659x258.png)
## 6 日期范围联动配置
### 6.1 SQL数据集配置
SQL 数据集参数为`“开始时间:createTime_begin”`和`“结束时间:createTime_end”`;参数需设置默认值,否则不查询时,默认没有数据;
查询SQL如下:
```
select * from sys_user where create_time >= '${createTime_begin}' and create_time <='${createTime_end}'
或
select * from sys_user where create_time between '${createTime_begin}' and '${createTime_end}'
```
![](https://img.kancloud.cn/bf/d9/bfd9e4b83e2c932786a63c3ba60a97e1_1517x813.png)
### 6.2 表单配置日期范围
填写参数名称`“createTime”`,选择日期类型,及范围查询
![](https://img.kancloud.cn/2c/8a/2c8a69b5986a894f29a9aecdc3305374_1094x266.png)
### 6.3 配置联动
选择开始时间及结束时间对应参数即可
![](https://img.kancloud.cn/29/f0/29f0feea32602cfb1a19fce462957705_623x392.png)
- 项目介绍
- 仪表盘/门户
- 仪表盘/门户设计常见问题
- 基础配置
- 1.基础操作
- 1.1 登录
- 1.2 新建面板使用
- 1.3 如何配置菜单
- 2. 静态数据使用
- 3. 动态数据使用
- 4. 数据集配置
- 4.1 SQL数据集
- 4.2 API数据集
- 4.3 JSON数据集
- 4.4 WebSocket数据集
- 5.字典配置
- 6.多数据源配置
- 7. 组件交互设置
- 7.1 跳转地址
- 7.2 查询配置
- 7.3 钻取配置
- 7.4 联动配置
- 7.5 自定义JS脚本
- 图表组件
- 1.基础配置项
- 1.1 卡片设置
- 1.2 标题设置
- 1.3 X轴设置
- 1.4 Y轴设置
- 1.5 提示语设置
- 1.6 坐标轴边距
- 1.7 图例设置
- 1.8 中心坐标
- 1.9 柱体设置
- 2.柱形图
- 2.1 基础柱形图
- 2.2 堆叠柱形图
- 2.3 动态柱形图
- 2.4 背景柱形图
- 2.5 对比柱形图
- 2.6 正负条形图
- 2.8 折柱图
- 3.饼图
- 4.折线图
- 4.1 普通折线图
- 4.2 平滑折线图
- 4.3 阶梯折线图
- 4.4 对比折线图
- 5.雷达图
- 5.1 普通雷达图
- 5.2 圆形雷达图
- 6.环形图
- 7.面积图
- 8.进度图
- 9. 漏斗图
- 9.1 普通漏斗图
- 9.2 金字塔漏斗图
- 10.象形图
- 11.仪表盘
- 基础仪表盘
- 多色仪表盘
- 12. 散点图
- 12.1 普通散点图
- 12.2 气泡图
- 布局组件
- 1.选项卡
- 2.栅格
- 数据列表组件
- 1.数据表格
- 2.数据列表
- 表单组件
- 1.表单
- 2.轮播图
- 3.Iframe
- 4.图片
- 5.文本
- 6.按钮
- 7.日历
- 首页常用组件
- 1.快捷导航
- 2. 统计卡片
- 3.项目列表
- 4.待办事项
- 5.最新动态
- 使用技巧
- 制作图标库
- 组件配置
- 自定义组件
- 地图组件
- 标注地图
- 散点地图
- 万能组件
- 3d柱子
- 牛气冲天
- 水球图
- 3D地图
- 数据预警示例
- 自定义属性
- 设置地图标注文字
- 设置图表标线
- 如何在自定义属性中使用数据(静态,接口,sql)