NPM集成
现在许多前端开发人员使用 NPM 包进行管理应用，为了更方便此类用户直接添加 Wyn 产品插件，例如仪表板设计器、报表设计器、各种数据集设计等等，我们将产品制作成了 NPM 集成包。
NPM 集成包是具有用于集成所有插件的统一接口的包，可以降低在其项目中学习、开发和维护集成的复杂性。
用户可以将NPM包添加到项目并用于启动插件应用程序。
集成方法介绍
注意
请提前将您的应用地址添加到 Wyn 的跨域请求中（在系统后台>系统设置>系统配置中进行设置），以允许集成后进行跨域连接。
Wyn 前端集成现已推出官方前端包：
https://www.npmjs.com/package/@grapecity/wyn-integration
代码详细说明请参照npm 项目文档。
安装说明
npm install @grapecity/wyn-integration使用说明
import { WynIntegration } from "@grapecity/wyn-integration";
WynIntegration.createDashboardDesigner({
baseUrl: 'http://sample.com/',
token: 'xxxxxxxxxf8129e87f6813c13ee7ec0bf1f01198160f3bdddb6771c20fab9',
defaults: {
dashboardId: 'e9ab2113-32bd-403e-9f0a-eb2b0438f864',
lng: 'en',
},
}, '#wyn-root').then(ins => {
});代码介绍
在npm 组件包中，提供了多种仪表板、数据集的设计器(预览器)集成方法，如下所示:
import { WynIntegration } from "@grapecity/wyn-integration";
WynIntegration.createDashboardDesigner // 创建仪表板设计器
WynIntegration.createDashboardViewer // 创建仪表板预览器
WynIntegration.createViewerLite // 创建标准版仪表板预览器
WynIntegration.createReportDesigner // 创建报表设计器
WynIntegration.createReportViewer // 创建报表预览器
WynIntegration.createDatasetDesigner // 创建数据集设计器
WynIntegration.createDatasetViewer // 创建数据集预览器
WynIntegration.createDatasourceDesigner // 创建数据源设计器
WynIntegration.createDatasourceViewer // 创建数据源预览器
WynIntegration.createPushDatasetDesigner // 创建推送数据集设计器
WynIntegration.createStreamingDatasetDesigner // 创建流式数据集设计器函数调用方法参数可参考 npm 项目说明
https://www.npmjs.com/package/@grapecity/wyn-integration
通过简单的代码调用即可轻松集成制作好的仪表板(报表)。
具体代码可参考基于vue 工程的npm 集成示例代码。
下载源码包后，修改WynBI 中的服务器地址，仪表板id, token 信息，然后执行：
npm install
npm run serve
即可实现Wyn看板的快速集成。