决策报表控件联动ECharts图表

1.1 版本

1.2 问题描述

在决策报表的 body 中，直接使用控件绑定参数是可以实现 自动查询 的。但是，对 ECharts 图表来说，并不支持直接使用 body 中的控件实现联动。那么要实现 body 中的控件联动 ECharts 图表应该怎么做呢？

1.3 解决思路

给 body 中的控件添加「编辑后」事件，使用 FR.Chart.WebUtils.changeParameter() 给图表参数赋值，ECharts 图表利用 FR.remoteEvaluate() 接收参数实现 ECharts 图表动态展示。实现效果如下图所示：

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 的布局方式修改为「绝对布局」，向 body 中拖入一个标签控件、下拉框控件、ECharts 图表。如下图所示：

2）设置标签控件的控件值为 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 节实现效果所示。

注：不支持移动端。

点击下载模板：决策报表控件联动ECharts图表.frm