1. 概述
1.1 版本
| 报表服务器版本 | JAR 包版本 | 插件版本 |
|---|---|---|
| 10.0.19 | 2021-10-15 | V1.0.0 |
1.2 预期效果
在 FineReport 中，使用普通图表时，可在图表特效中通过 超级链接 进行传参，实现组件之间的联动效果。 那么 ECharts 图表该如何传参联动其他组件呢？
例如将饼图的系列值「地区」作为参数传递给报表块和柱形图，让表格和柱形图根据参数显示对应地区下销售员的销量，预期效果如下图所示：
1.3 实现思路
利用 FineReport 的传参接口结合 ECharts 事件 实现。
1）changeParameter 接口：该接口只对「图表对象」有效，对报表对象无效。例如 ECharts 图表可传参给普通报表中的图表、决策报表中的图表块，但无法传参给决策报表中的报表块及报表块中的图表。
2）gotoPage 接口：可实现传参给决策报表中的报表块。
注：上述两种传参接口属于局部刷新，要实现动态参数传参全局刷新的效果，请参考文档 ECharts图表实现动态参数联动效果。
2. 示例
2.1 准备数据
点击设计器左上角「文件>新建决策报表」，新建两个数据库查询，SQL 查询语句分别为：
ds1 ：SELECT * FROM 销量 。
ds2 ：SELECT * FROM 销量 WHERE 1=1 ${if(len(area) == 0,"","and 地区 = '" + area + "'")} ，该语句可实现参数为空时选择全部数据。
2.2 设计报表
1）首先将 body 的布局方式改为「绝对布局」，缩放逻辑改为「适应区域」。如下图所示：
2）拖入一个 ECharts图表、一个报表块、一个柱形图到 body 中，适当调整下组件的大小和位置。如下图所示：
3）选中组件时，在右侧属性面板中可设置「组件标题」，分别设置各组件标题为：ECharts饼图、报表块、柱形图，可自定义标题样式。如下图所示：
2.3 设置图表
2.3.1 报表块
双击报表块进入编辑界面，设计表格样式如下图所示：
其数据是来源于有参数的 ds2 数据集，其中 C2 单元格的数据设置为「汇总>求和」。展示时会根据接收到的参数进行展示，初始状态参数为空时，则展示全部数据。如下图所示：
设置完成后，点击左下角「表单」返回 body 界面。
2.3.2 柱形图
双击组件进入编辑状态：
1）给柱形图绑定带有参数的 ds2 数据集中的数据，展示时会根据接收到的参数进行展示，初始状态参数为空时，则展示全部数据。
2）设置柱形图的「样式>标题」，勾选「标题可见」，输入公式 =$area 。
如下图所示：
2.3.3 ECharts图表
1）双击 ECharts 图表组件进入编辑状态，点击「配置」，添加一个「二维数组结构」，选择 ds1 数据集的地区和销量字段。
2）添加完数据结构后，再点击「代码编辑器」，输入如下代码：
var TABLE_DATA=getData('data1')
option = {
title: {
text: '各地区销量',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
top: '50%',
left: '85%'
},
dataset: {
source: TABLE_DATA,
},
series: [
{
type: 'pie',
radius: '50%',
label: {
show: false,
},
}
]
};
//传参给报表块report0
myChart.on('click', function (params) {
_g().getWidgetByName('report0').gotoPage(1, {
"area": params.name
}, true);
});
//传参给柱形图chart1
myChart.on("click", function(params) {
if(window.FR) {
FR.Chart.WebUtils.changeParameter({
chartID: 'chart1',
//柱形图的chartID为chart1
para: {
area: params.name
}
});
}
});
注1：图表在普通报表中，或在报表块的单元格中时，只支持图表联动图表，不支持图表联动单元格数据。
注2：在普通报表中传参给图表时， 将 chartID 换成图表所在单元格即可。
如下图所示：
2.4 效果预览
保存报表，点击「PC端预览」，效果如 1.2 节预期效果所示。
注：不支持移动端。
3. 模板下载
点击下载模板：ECharts图表联动其他组件.frm