集成时自定义仪表板设计器

1. 概述

1.1 功能概述

Wyn 提供灵活的集成方式，既支持单文档嵌入，也可通过API接口实现功能级集成。针对仪表板设计器，用户可通过参数配置实现界面定制（本节提供典型示例），完整API能力请参考API文档。

2. 自定义仪表板设计器

2.1 隐藏设计器工具栏

Wyn 提供 toolbar 参数（可选'show'或'hide'），当嵌入仪表板设计器至业务系统时，用户可隐藏默认工具栏，完全基于业务需求自主定制顶部功能按钮，实现与宿主系统一致的UI交互体验。
1）参数：toolbar: 'show' | 'hide'
2）示例代码：
```
WynIntegration.createDashboardDesigner({
    baseUrl:baseUrl,
    token:token,
    features: {
      toolbar: 'hide',
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});        
```
3）集成成果展示：
显示状态
隐藏状态

2.2 隐藏属性设置面板

Wyn 提供showInspector参数（可选'true'或'false'），隐藏仪表板设计器的属性设置面板，配合权限系统灵活控制用户对图表属性的编辑权限。
1）参数：showInspector: true | false
2）示例代码：
```
WynIntegration.createDashboardDesigner({
    baseUrl:baseUrl,
    token:token,
    features: {
      toolbar: 'show',
      showInspector: true
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});      
```
3）集成成果展示：
显示状态
隐藏状态

2.3 隐藏数据绑定面板

Wyn 提供showDataBindingPanel参数（可选'true'或'false'），在集成仪表板设计器时隐藏数据绑定面板，有效防止未授权用户查看数据信息，同时支持通过权限系统精细控制数据可见性。
1）参数：showDataBindingPanel: true | false
2）示例代码：
```
WynIntegration.createDashboardDesigner({
    baseUrl:baseUrl,
    token:token,
    features: {
      toolbar: 'show',
      showInspector: true,
      showDataBindingPanel: true
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});      
```
3）集成成果展示：
显示状态
隐藏状态

2.4 禁用切换数据集

Wyn 提供disableChangeDataset参数（可选'true'或'false'），来禁用仪表板设计器的数据下拉选择功能，确保用户仅能使用预分配的数据集/数据模型。

1）参数：disableChangeDataset: true | false

2）示例代码：

WynIntegration.createDashboardDesigner({
    baseUrl:baseUrl,
    token:token,
    features: {
      toolbar: 'show',
      showInspector: true,
      showDataBindingPanel: true,
      disableChangeDataset: true
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});

3）集成成果展示：

显示状态	隐藏状态

2.5 组件箱动态控制显示

Wyn 提供componentCategories 数组参数来精准控制设计器左侧组件箱的可见分类，用户可以自己来控制左侧组件箱的动态显示。

1）参数：componentCategories: ["charts","visual","component","slicers","gallery","wizard"]

2）示例代码：

WynIntegration.createDashboardDesigner({
    baseUrl:baseUrl,
    token:token,
    features: {
      toolbar: 'show',
      showInspector: true,
      showDataBindingPanel: true,
      disableChangeDataset: false,
      componentCategories: ["charts","gallery","wizard"]
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});

3）示例代码集成成果展示如下图：

PixPin_2025-07-22_16-31-07

2.6 动态控制组件的操作菜单

Wyn 提供 actionbarItems 参数，在集成仪表板设计器时可精准控制图表组件的操作菜单功能，用户可以自己来控制图表组件的操作菜单的动态显示。
1）参数：actionbarItems : ["filter","sort","rank","modelParameters","convertVisual","edit","focus","showData","export","annotation","remove","clearCustomData","cleanSliceFilter","clearRuntimeFilter","shareScenario","openFullDashboard","clearSelection","analysisPath","mergeDatasets","contentSetting","backgroundImageID","conditionalFormat","editorLayout","expand","floorPlanId","mapInfo","referenceLine","trendLines"]
2）示例代码：
```
WynIntegration.createDashboardDesigner({
    baseUrl:baseUrl,
    token:token,
    features: {
      toolbar: 'show',
      showInspector: true,
      showDataBindingPanel: true,
      disableChangeDataset: false,
      componentCategories: ["charts","gallery","wizard"],
      actionbarItems : ["focus","annotation","shareScenario"]
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});      
```
3）示例代码集成成果展示如下图，设计器组件的可见菜单项会发生变化。

2.7 禁用动画/轮播/自动滚动功能

在嵌入时如果希望将组件中的动画/轮播/自动滚动功能关闭可以使用如下参数进行控制。

1）设计器：

WynIntegration.createDashboardDesigner({
   baseUrl:baseUrl,
   token:token,
   features: {
       disableAnimation：false
   },
}, '#wyn-root').then(ins => {
   this.ins = ins;
});

2）查看器：

WynIntegration.createViewerLite({
    baseUrl:baseUrl,
    token:token,
    features: {
        disableAnimation：false,
        disableAutoScroll：false，
        disableAutoSwitchPage：false
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});

2.8 隐藏设计器关闭按钮

将仪表板设计器集成到自己的业务系统，初始化设计器时不希望使用自带的设计器关闭按钮，希望能够根据业务系统风格自己来定制化设计器关闭按钮。

仪表板设计器集成增加了该功能，用户可以自己来控制是否显示设计器关闭按钮。

1）参数：showCloseButton : true | false

2）示例代码：

WynIntegration.createDashboardDesigner({
    baseUrl:baseUrl,
    token:token,
    features: {
      toolbar: 'show',
      showInspector: true,
      showDataBindingPanel: true,
      disableChangeDataset: false,
      componentCategories: ["charts","gallery","wizard"],
      actionbarItems : ["focus","annotation","shareScenario"],
      showCloseButton : false,
      showHelpButton: true
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});

3）集成成果展示：

显示状态	隐藏状态

2.9 隐藏设计器帮助与支持按钮

将仪表板设计器集成到自己的业务系统，初始化设计器时不希望使用自带的帮助与支持按钮，希望能够隐藏这个按钮，或者根据业务系统风格自己来定制化设计器帮助与支持按钮。

仪表板设计器集成增加了该功能，用户可以自己来控制是否显示设计器帮助与支持按钮。

1）参数：showHelpButton: true | false

2）示例代码：

WynIntegration.createDashboardDesigner({
    baseUrl:baseUrl,
    token:token,
    features: {
      toolbar: 'show',
      showInspector: true,
      showDataBindingPanel: true,
      disableChangeDataset: false,
      componentCategories: ["charts","gallery","wizard"],
      actionbarItems : ["focus","annotation","shareScenario"],
      showCloseButton : true,
      showHelpButton: false
    },
}, '#wyn-root').then(ins => {
    this.ins = ins;
});

3）集成成果展示：

显示状态	隐藏状态

2.10 隐藏设计器移动端视图按钮

将仪表板设计器集成到自己的业务系统，经常会给最终用户开放仪表板设计的能力，让最终用户能够自己设计想要的仪表板风格，但是不希望用户在设计仪表板的时候，去修改当前仪表板的移动端视图，或者针对不同权限的用户来控制去操作移动端视图，那么在初始化设计器时，用户希望能够控制是否显示移动端视图按钮。
仪表板设计器集成增加了该功能，用户可以自己来控制是否显示移动端视图按钮。
1）参数：showMobileDesigner: true | false
2）示例代码：
```
WynIntegration.createDashboardDesigner({
   baseUrl:baseUrl,
   token:token,
   features: {
     toolbar: 'show',
     showInspector: true,
     showDataBindingPanel: true,
     disableChangeDataset: false,
      componentCategories: ["charts","gallery","wizard"],
      actionbarItems : ["focus","annotation","shareScenario"],
      showCloseButton : true,
      showHelpButton: true,
      showMobileDesigner: true
   },
}, '#wyn-root').then(ins => {
   this.ins = ins;
});     
```
3）集成成果展示：
显示状态
隐藏状态

2.11 控制设计器预览以及返回设计器

将仪表板设计器集成到自己的业务系统，初始化设计器时不希望使用自带的预览与返回编辑，希望能够隐藏这个按钮，或者根据业务系统风格自己来定制化设计器预览与返回编辑按钮。
集成设计器时，隐藏设计器顶部工具栏，那么用户就需要自己来设计添加仪表板文档保存按钮。
仪表板设计器集成增加了该功能，用户可以自己来控制设计器预览以及返回设计器功能。
1）参数：designer.togglePreview();
2）集成成果展示：

2.12 保存仪表板文档

集成设计器时，隐藏设计器顶部工具栏，那么用户就需要自己来设计添加仪表板文档保存按钮。
仪表板设计器提供保存仪表板文档的API，用户可以任意实现。
```
designer.save(
name: 'xxx',
categories: ['xx'],
comment: 'xx',
shouldPublish: false)
```

2.13 隐藏/显示数据绑定和属性设置面板

集成设计器时，隐藏设计器顶部工具栏，那么用户就需要自己来设计仪表板组件数据绑定和属性设置面板事件，用户可以更加灵活的跟自己的业务系统融合，通过业务系统的按钮触发数据绑定和属性设置面板的显示隐藏等。
仪表板设计器提供隐藏显示数据绑定，属性设置面板API，用户可以任意实现。

designer.showDataBindingPanel();
designer.hideDataBindingPanel();
designer.showInspector();
designer.hideInspector();

2.14 增加新组件

通过addVisual来增加新组件：

addVisual: (
    visualName: string,
    width?: string,
    height?: string,
    left?: string,
    top?: number,
) => Promise<string>

2.15 指定数据集ID

通过setDatasetId来指定数据集ID：
```
setDatasetId: (datasetId: string) => void;
designer.setDatasetId('xxxx-xxxx-xxxx')
```
type=info
注意： 魔数图、计算图表、多源图表、富文本、容器、选项卡、嵌入仪表板和嵌入报表不支持使用此API。

2.16 事件监听

可以使用事件监听：

on: (eventType: DesignerEventType, eventHandler: (...args) => void) => void;
off: (eventType: DesignerEventType, eventHandler: (...args) => void) => void;
designer.on('viewChanged', (view) => {
    console.log(view);
});

2.17 动态添加组件

Wyn 提供动态组件API，支持完全自定义组件添加流程，用户可绕过默认组件箱，通过事件触发添加不同的组件（详见API文档）。

1. 概述
1.1 功能概述
2. 自定义仪表板设计器
2.1 隐藏设计器工具栏
2.2 隐藏属性设置面板
2.3 隐藏数据绑定面板
2.4 禁用切换数据集
2.5 组件箱动态控制显示
2.6 动态控制组件的操作菜单
2.7 禁用动画/轮播/自动滚动功能
2.8 隐藏设计器关闭按钮
2.9 隐藏设计器帮助与支持按钮
2.10 隐藏设计器移动端视图按钮
2.11 控制设计器预览以及返回设计器
2.12 保存仪表板文档
2.13 隐藏/显示数据绑定和属性设置面板
2.14 增加新组件
2.15 指定数据集ID
2.16 事件监听
2.17 动态添加组件