Web报表表单组件联动实现

在展示数据时，仅依靠报表或图表往往不够，由于数据之间存在关联，还需实现报表与图表的联动。本文将借助Web报表工具FineReport，演示如何让两者协同工作，提升数据分析的直观性与交互性。

1、 开启模板

2、 添加新组件

3、 所示，将饼图组件拖至柱形图左侧即可。

4、 新增数据集

5、 创建一个新的数据集 ds2，其查询语句为：SELECT * FROM 表名 WHERE 1=1 $${if(len(product)==0,,AND 产品类型= + product + )}，根据产品参数是否为空动态添加筛选条件。

6、 数据绑定组件

7、 饼图

8、 选中饼图，在右侧属性面板的数据选项中配置相应数据，操作所示。

9、 柱形图

10、 选中柱形图后更改数据源为新建的ds2数据集，分类轴保持销售员不变，系列名称改为产品，系列值仍为销量，具体设置所示。

11、 设置超链接

12、 点击饼图时，其数据会传递至柱形图，导致柱形图所绑定的数据集ds2参数更新，从而使柱形图显示内容随之改变，实现图表间的联动效果。

13、 所示，选中饼图后进入图表属性表中的特效设置，点击交互属性并添加超级链接。链接方式设为当前表单对象，选择对应的柱形图组件，并添加名为product的参数，将其值设定为系列名称。

14、 若需链接至当前表单内不同组件，应选择当前表单对象作为超级链接方式。

15、 确认并保存模板。

16、 设计表单样式

17、 在表单右下角的组件列表中选择body主框架，将其内边距均设为10，组件间距设为5，效果所示。

18、 为表格及两个图表组件分别添加黑色边框：选中表格组件，点击属性栏样式选项后的设置按钮，调整边框样式与颜色，按图示完成操作。

19、 用相同方式为其余两个图表组件添加边框。

20、 查看效果

21、 点击预览按钮，在网页端打开模板，选择饼图中的扇形区域，即可查看所示的展示效果。