【嵌入式集成】 DIV集成中如何动态更改仪表板参数 - setParameter()

       Wyn 商业智能软件紧跟嵌入式分析发展趋势，除了具备将现有模块直接嵌入的能力（如整个仪表板或单个图表嵌入、仪表板设计器嵌入、分析门户嵌入、OEM 安装包嵌入等）之外，同时还提供了丰富的 API，可以满足您个性化的嵌入需求实现深度集成。

       当我们在开发自定义可视化插件的时候，可以通过Visual API接口去利用提供好的一些api来帮助我们去做工具提示，交叉筛选，管理选择状态等。而现在我们新增了接口方法parameterService.setParameter();

功能介绍：

       通过这个方法我们可以改变仪表板的静态参数值（非绑定类型），就是说如果我们设置的一些参数没有被绑定在一些筛选器或者数据列当中。我们就可以通过调用这个方法来改变这个仪表板参数的值，是不是很神奇。

接口文档链接;

效果演示：

接下来让我们来看看我们该如何在自定义插件开发中使用这个方法。

使用步骤：

Step1：准备开发环境

首先我们要参考可视化插件开发流程将开发环境准备好

开发流程文档

Step2：修改capabilities.json

修改capabilities.json文件中的options内容，其中watchParameter用于定义参数映射，具体可以参考文档

1. {
   
2.     "dataBinding": {
   
3.     },
   
4.     "options": {
   
5.         "visual": [
   
6.             {
   
7.                 "type": "interaction",
   
8.                 "watchParameter": {
   
9.                     "roles": [
   
10.                         {
    
11.                             "name": "target",
    
12.                             "display": "target",
    
13.                             "displayNameKey": "targetLabel"
    
14.                         }
    
15.                     ],
    
16.                     "staticOnly": true
    
17.                 }
    
18.             }
    
19.         ]
    
20.     },
    
21.     "actions": [],
    
22.     "analysis": []
    
23. }

复制代码

修改之后我们就可以在组件右侧的属性面板增加绑定参数的选项。

Step3：修改visual.ts文件

1. import '../style/visual.less';
   
2. 
   
3. const formTemplate = `
   
4. <form data-role="formEle" class="control-form">
   
5.   <div class="form-row">
   
6.     <input class="field-control"  type="text" placeholder="--- Unset ---" data-role="paraValue">
   
7.   </div>
   
8.   <div class="form-row">
   
9.     <button data-role="subBtn">Submit</button>
   
10.   </div>
    
11.   <div class="block-layer"></div>
    
12. </form>
    
13. `;
    
14. 
    
15. export default class Visual extends WynVisual {
    
16.   private inputEle: HTMLInputElement;
    
17.   private btnEle: HTMLButtonElement;
    
18.   private targetPara;
    
19. 
    
20.   constructor(dom: HTMLDivElement, private host: VisualNS.VisualHost, options: VisualNS.IVisualUpdateOptions) {
    
21.     super(dom, host, options);
    
22.     dom.innerHTML = formTemplate;
    
23. 
    
24.     this.inputEle = dom.querySelector('[data-role="paraValue"]');
    
25.     this.btnEle = dom.querySelector('[data-role="subBtn"]');
    
26.     this.btnEle.addEventListener('click', (e) => {
    
27.       e.preventDefault();
    
28.       host.parameterService.setParameter({
    
29.         name: this.targetPara.meta.name,
    
30.         value: [this.inputEle.value],
    
31.       });
    
32.       host.commandService.execute([{
    
33.         name: 'Jump', //  Drill or 'Jump'
    
34.         payload: {
    
35.           "target": "abc"
    
36.         },
    
37. 
    
38.       }]);
    
39.     })
    
40. 
    
41.     this.render();
    
42.   }
    
43. 
    
44.   private render() {
    
45.     if (this.targetPara) {
    
46.       this.inputEle.value = this.targetPara.value[0];
    
47.       this.inputEle.disabled = false;
    
48.       this.btnEle.disabled = false;
    
49.     } else {
    
50.       this.inputEle.value = '';
    
51.       this.inputEle.disabled = true;
    
52.       this.btnEle.disabled = true;
    
53.     }
    
54.   }
    
55. 
    
56.   public update(options: VisualNS.IVisualUpdateOptions) {
    
57.     this.targetPara = options.watchedParameters['target'];
    
58.     this.render();
    
59.   }
    
60. 
    
61.   public onDestroy(): void {
    
62. 
    
63.   }
    
64. 
    
65.   public getInspectorHiddenState(options: VisualNS.IVisualUpdateOptions): string[] {
    
66.     return null;
    
67.   }
    
68. 
    
69.   public getActionBarHiddenState(options: VisualNS.IVisualUpdateOptions): string[] {
    
70.     return null;
    
71.   }
    
72. 
    
73.   public getColorAssignmentConfigMapping(dataViews: VisualNS.IDataView[]): VisualNS.IColorAssignmentConfigMapping {
    
74.     return null;
    
75.   }
    
76. }

复制代码

从初始的模板代码上我们进行修改，通过编写一个input框和一个button提交按钮来输入提交要改变的参数值，通过button的点击事件的回调来触发parameterService.setParameter()方法将输入的参数值传入Wyn，从而修改仪表板参数。

看了它的功能介绍，大家脑海里面是不是有了很多奇思妙想和之前没有办法解决的问题，现在让我们下载示例试试这个神奇的方法吧。