跳到主要内容

组件联动

组件联动是指当我们点击某个图表的时候对另外一个图表的数据按条件重新加载。

联动配置仅用于动态数据的SQL和API数据集，静态数据及JSON数据不支持

一、展示效果​

1. 查询条件联动​

2. 图表点击联动​

二、查询条件联动配置方法​

1. 配置表单查询条件​

1.1 添加表单​

1.2 配置表单字段：​

1.3 配置完成后的效果：​

2. 配置图表​

2.1 添加图表​

以柱状图为例

2.2 配置图表数据​
  • 图表数据配置

  • 本例配置SQL数据集，传参的SQL；
select * from demo where name like '%${name}%' and sex='${sex}'
  • 也可以配置API数据集
https://api.jeecg.com/mock/map?name=${name}&value=${value}

数据解析后，可以在参数列设置默认值

3. 配置联动​

  • 点击表单组件，右侧操作配置选择联动设置

  • 可设置联动的图表会出现在下拉框

  • 配置联动参数
    1. 选中联动组件
    2. 点击新增追加联动映射字段
    3. 设置映射字段 映射字段：表单中的查询字段，如“姓名”、“性别” 接收参数：图表数据集中的查询参数，如“name”，“sex”

4. 配置完成​

三、图表联动图表配置方法​

1. 配置第一个图表(柱形图)​

1.1 添加图表​

点击组件栏中的图表，添加基础柱形图

1.2 配置柱形图数据集​

点击“数据”，填写数据相关信息

数据源类型：动态数据

数据集：选择数据集，可以是SQL或者API数据集均可

映射关系：数据集返回的数据字段

1.3 配置完成后的效果​

至此，第一个柱形图就配置完成了

2. 配置第二个图表(饼图)​

2.1 添加图表​

以饼图为例，点击“组件栏”，选择饼图添加

2.2 配置图表数据​
  • 图表数据配置

数据源类型：动态数据

数据集：选择数据集，可以是SQL或者API数据集均可

映射关系：数据集返回的数据字段

  • 本例配置SQL数据集，传参的SQL；
select * from sales where deptName ='${deptName }'
  • 也可以配置API数据集
https://api.jeecg.com/mock/51/drilling/deptuser?name='${deptName}'

数据解析后，可以在参数列设置默认值

3. 配置联动​

  • 点击柱形图组件，在右侧操作区选择交互，选择联动配置，交互方式选择“组件联动”

  • 设置需要联动的图表(饼图)

① 点击“新增”，弹出组件配置
② 联动组件：选择需要联动的组件，此示例选择“饼图”
③ 新增：点击信息配置映射参数字段
④ 映射字段：name为柱形图的字段（部门），deptName为饼图数据查询的参数


4. 配置完成​