1. 概述
1.1 版本
| 报表服务器版本 | 插件版本 |
|---|---|
| 11.0 | V1.0.0 |
1.2 问题描述
在决策报表的 body 中，直接使用控件绑定参数是可以实现 自动查询 的。但是，对 ECharts 图表来说，并不支持直接使用 body 中的控件实现联动。那么要实现 body 中的控件联动 ECharts 图表应该怎么做呢？
1.3 解决思路
给 body 中的控件添加「编辑后」事件，使用 FR.Chart.WebUtils.changeParameter() 给图表参数赋值，ECharts 图表利用 FR.remoteEvaluate() 接收参数实现 ECharts 图表动态展示。实现效果如下图所示：
2. 示例
2.1 准备模板
在设计器中新建决策报表，新建两个数据集。
ds1：SQL 查询语句为 SELECT * FROM 销量。获取销量表中全部数据。
ds2：SQL 查询语句为SELECT * FROM 销量 WHERE 1=1 ${if(len(area) == 0,"","and 地区 = '" + area + "'")} ，实现参数 area 为空时获取全部数据，否则根据参数 area 获取对应数据。
2.2 设计模板
2.2.1 拖入组件
1）首先将 body 的布局方式修改为「绝对布局」。如下图所示：
2）向 body 中拖入一个标签控件、下拉框控件、ECharts 图表。如下图所示：
3）设置标签控件的控件值为 area： 。设置下拉框控件名称为「area」，数据字典为「数据查询」，选择 ds1 数据集，实际值和显示值均为「地区」字段。
如下图所示：
2.2.2 添加编辑后事件
给下拉框控件添加一个编辑后事件，输入 JavaScript 代码如下：
FR.Chart.WebUtils.changeParameter({
chartID:'chart0',
para:{
area:this.getValue()
}
})
步骤如下图所示：
2.2.3 添加图表数据结构
双击 ECharts 图表，在配置中添加一个二维数组结构，绑定设置了参数的 ds2 数据集中的「销售员」和「销量」字段。如下图所示：
2.2.4 编辑代码
点击「代码编辑器」，因为 ds2 数据集中定义的参数为 $area ，所以通过 FR.remoteEvaluate("$area") 接收参数。输入代码如下所示：
try
{var area = FR.remoteEvaluate('$area');}
catch(err){}
const TABLE_DATA = getData("data1");
option = {
title: {subtext: area},
legend: {},
tooltip: {},
dataset: {
source: TABLE_DATA,
},
xAxis: { type: "category" },
yAxis: {},
series: [{ type: "bar" }],
};
如下图所示：
2.3 效果预览
保存报表，点击「PC端预览」，效果如 1.3 节实现效果所示。
注：不支持移动端。
3. 模板下载
点击下载模板：决策报表控件联动ECharts图表.frm
