集成仪表板或单个图表

1. 概述

1.1 功能概述

Wyn 针对仪表板的查看提供标准分析与高级分析双模式，支持通过DIV容器无缝嵌入Web应用：标准分析可优化大屏展示性能，高级分析赋能自助式深度分析，用户可根据场景需求灵活选用（具体分析模式对比说明详见默认查看器），两种分析模式的集成方法如下。

2. 操作步骤

2.1 安装最新的集成包

安装最新的集成包：https://www.npmjs.com/package/@grapecity-software/wyn-integration。
```
npm install @grapecity-software/wyn-integration
```

2.2 标准分析模式

以下根据不同的场景具体介绍集成方法。

2.2.1 集成整个仪表板

针对集成整张仪表板标准分析查看器，请参考以下代码：

import { WynIntegration } from "@grapecity-software/wyn-integration";

let viewer:any = null;
const createViewer = (baseURL, token, dashboardId) => {
    if (viewer){
        viewer.destroy();
    }
    
    WynIntegration.createViewerLite({
        baseUrl: baseURL, //'http://example.com:51980',
        token: token,
        defaults: {
            dashboardId: dashboardId, //仪表板文档ID
            //dp: {                         
            //    "仪表板参数名称": ['仪表板参数值'],   // 格式：object | string                     
            //},
        },
        features: {
        }
    }, '#wyn-root').then(instance => {
        viewer = instance;
    });
}

参数说明：
- baseURL 指 Wyn 服务器的地址。
- token 指访问 Wyn 服务器的令牌，在 Wyn 的「系统管理>安全设置>生成令牌」界面生成，token所代表的用户需要具有查看该仪表板的权限。具体获取方法，请详见生成令牌。
- defaults 是用来配置标准查看器的默认配置项，详细的项目参见 dashboardliteviewerdefaults。
  - dashboardId 指仪表板文档 Id，可以从Wyn 的「文档门户>我的分析」中对应的仪表板文档列表获取。
  - dp 指仪表板参数，其中仪表板参数名称指仪表板的参数名称，仪表板参数值可以自定义。
```
 例如：
  dp: {                         
        "地区": ['华北']                 
  },
```
features 是用来配置标准查看器的功能配置项，详细的项目参见：dashboardliteviewerfeatures。
createViewerLite 异步 then 方法返回的 instance 对象，是创建完成的仪表板标准查看器实例对象，实例对象的接口参见文档：dashboard.DashboardLiteViewer

2.2.2 集成单个仪表板图表

在某些应用场景下，用户希望将单个的可视化组件集成到应用程序，而不是整张仪表板。这个时候在集成仪表板标准分析查看器代码的基础上，只需要指定可视化组件的名称即可。

import { WynIntegration } from "@grapecity-software/wyn-integration";

let viewer:any = null;
const createViewer = (baseURL, token, dashboardId) => {
    if (viewer){
        viewer.destroy();
    }
    
    WynIntegration.createViewerLite({
        baseUrl: baseURL, //'http://example.com:51980',
        token: token,
        defaults: {
            dashboardId: dashboardId, //仪表板文档ID
            //dp: {                         
            //    "仪表板参数名称": ['仪表板参数值'],   // 格式：object | string                     
            //},            
            scenario: "picture-2"
        },
        features: {
        }
    }, '#wyn-root').then(instance => {
        viewer = instance;
    });
}

参数说明：
- scenario 指的是可视化组件的名称，可以在仪表板设计器中获取。
- 其余参数说明请参考仪表板标准分析集成整个仪表板的参数说明。

2.3 高级分析模式

2.3.1 集成整个仪表板

针对集成整张仪表板高级分析查看器，请参考以下代码：

import { WynIntegration } from "@grapecity-software/wyn-integration";

let viewer:any = null;
const createViewer = (baseURL, token, dashboardId) => {
    if (viewer){
        viewer.destroy();
    }
    
    WynIntegration.createDashboardViewer({
        baseUrl: baseURL, //'http://example.com:51980',
        token: token,
        defaults: {
            dashboardId: dashboardId, //仪表板文档ID
            //dp: {                         
            //    "仪表板参数名称": ['仪表板参数值'],   // 格式：object | string                    
            //},             
        },
        features: {
        }
    }, '#wyn-root').then(instance => {
        viewer = instance;
    });
}

参数说明：
- baseURL 指 Wyn 服务器的地址。
- token 指访问 Wyn 服务器的令牌，在 Wyn 的「系统管理>安全设置>生成令牌」界面生成，token 所代表的用户需要具有查看该仪表板的权限。具体获取方法，请详见生成令牌。
- defaults 是用来配置高级查看器的默认配置项，详细的项目参见：dashboardviewerdefaults。
  - dashboardId 指仪表板文档 Id，可以从 Wyn 的「文档门户>我的分析」中对应的仪表板文档列表获取。
  - dp 指仪表板参数，其中仪表板参数名称指仪表板的参数名称，仪表板参数值可以自定义。
- features 用来配置高级查看器的功能配置项，详细的项目参见：dashboardviewerfeatures。
- wyn-root 指的是嵌入到 HTML DIV 容器的Id。
- createDashboardViewer 异步 then 方法返回的 instance 对象，是创建完成的仪表板高级查看器实例对象，实例对象的接口参见文档：dashboard.DashboardViewer。

2.3.2 集成单个仪表板图表

在某些应用场景下，用户希望将单个的可视化组件集成到应用程序，而不是整张仪表板，这个时候在集成仪表板高级分析查看器代码的基础上，只需要指定可视化组件的名称即可。

import { WynIntegration } from "@grapecity-software/wyn-integration";

let viewer:any = null;
const createViewer = (baseURL, token, dashboardId) => {
    if (viewer){
        viewer.destroy();
    }
    
    WynIntegration.createDashboardViewer({
        baseUrl: baseURL, //'http://example.com:51980',
        token: token,
        defaults: {
            dashboardId: dashboardId, //仪表板文档ID
            //dp: {                         
            //    "仪表板参数名称": ['仪表板参数值'],   // 格式：object | string                     
            //},           
            scenario: "picture-2"
        },
        features: {
        }
    }, '#wyn-root').then(instance => {
        viewer = instance;
    });
}

参数说明：
- scenario 指的是可视化组件的名称，可以在仪表板设计器中获取。
- 其余参数说明请参考高级分析集成整个仪表板的参数说明。

3. 资源下载

示例文件包说明：已包含仪表板查看器及仪表板设计器两部分，您可直接导入至对应版本系统中查看使用。
wyn-integration-vue-dashboard.zip
wyn-integration-react-dashboard.zip
注意： 本示例压缩包基于8.1版本制作，请使用8.1及以上版本并参照导入与导出文档操作（低版本可能存在兼容性问题，建议升级）。

1. 概述
1.1 功能概述
2. 操作步骤
2.1 安装最新的集成包
2.2 标准分析模式
2.2.1 集成整个仪表板
2.2.2 集成单个仪表板图表
2.3 高级分析模式
2.3.1 集成整个仪表板
2.3.2 集成单个仪表板图表
3. 资源下载