需求场景

报告被嵌出到经营看板以外的某个网站，网站管理者可通过改变 url 中的参数信息，即 url传参的形式，实现例如不同部门人员下只能看到自己部门信息的效果

本节正是模拟嵌入了仪表盘报告的业务网站，在识别到不同部门人员要查看报表时，通过控制不同的url / iframe代码，实现对「部门人数占比」和「不同部门文化程度分布」两个组件的内容控制

操作准备

1. 本DEMO需要使用「变量」的功能，要求使用「高级模式」创建页面

2. 拖拽配置基础的分析组件

Url 传参操作步骤

• STEP1 创建控制权限变量

通过创建函数变量，来获取URL参数信息

① 点击变量池-新增变量，进入创建变量浮窗

② 选择函数变量类型，命名变量名称

③ 配置变量获取url参数信息

如图，函数效果为截取url参数中的'id'字段的值

例如url为『https://datatalk.qq.com/demo/dashboard/editor/200001400?id=销售部,财务部』

则函数就会取出 销售部,财务部 ，并赋值给我们创建的变量

函数体全文：

function get(variable) {  // 这一行不要修改，也不要删除

  // 在这里添加js逻辑，函数必须包含return语句，返回变量的值

  const params = (new URL(document.location)).searchParams;

  const id = params.get('id') || '';

  return id;

} // 这一行不要修改，也不要删除

④ 保存变量

保存后，即可在变量池中看到所创建的变量

•  STEP2 在组件中引用变量

① 配置任意组件

创建任意的图卡组件，例如一个环形图，让期望被参数控制的字段作为维度，方便查看控制效果

② 引用变量

在希望受到参数控制的组件里，把变量添加到过滤条件中

③ 将变量引用到过滤条件中

设置过滤条件为“是”“变量”，并将变量引用值粘贴进匹配框中

保存后，即可通过url参数控制过滤条件，以实现通过 url 传参的数据范围控制。

防篡改

在上述举例中，为了方便理解均使用明文参数进行举例。如要防止他人手动修改 url中的参数从而获取超出自身范围外的数据，可参考以下代码：

function get(variable) {  // 这一行不要修改，也不要删除

  // 在这里添加js逻辑，函数必须包含return语句，返回变量的值

  const params = (new URL(document.location)).searchParams;

  const id = params.get('id') || '-';

  return id === '81FNAJFB' ? '':id;

} // 这一行不要修改，也不要删除

代码逻辑变为，当没有任何参数传入时，参数取值 - 从而防止他人删除参数看到全局数据，只有当嵌入看板的系统方传入约定的密钥81FNAJFB 时，才展示全部数据。

在此基础上，您可以进一步将『销售部』这样的明文改为不可读的码值，并通过字典表将部门名称与码值进行映射，例如销售部=4A145，这样嵌入报告的系统就能够通过向参数中传入特定码值来展示不同的数据范围。