【嵌入式分析】纯JS结构的项目中div集成报表

  在 Wyn7.0 版本之后，div集成的方式有了优化，首先报表和仪表板不用再分开集成；其次，仪表板集成不用再引入 Wyn 服务的插件。帮助我们更方便的进行集成。但是目前只发布了通过npm依赖的方式进行集成。我们今天介绍如何在纯JS项目中集成报表和仪表板。

  1. 下载依赖文件
   先找一个项目通过 npm 的方式下载 wyn 的依赖文件：npm install @grapecity/wyn-integration
   

  2. 把下载的 node_modules 依赖文件全部拷贝到我们的新的项目中
   

  3. 引入依赖文件，编写集成代码
   

<script type="text/javascript" src="./node_modules/@grapecity/wyn-integration/build/WynIntegration.js"></script>

<script>
    // 集成报表查看器
    window.viewerInstance = null;
    WynIntegration.WynIntegration.createReportViewer({
    baseUrl: 'http://localhost:51980/',
    token: '9D2E6BB2A5AC05EAB95B0CB573E571EFFD64E33E3BF4A25C8E2821A7FF657842',
    reportId: '12d578ad-535e-4b30-9f04-237399a2ae8a',
    }, '#wyn-root').then(function (ins) {
    window.viewerInstance = ins;
    });
</script>

  


  4. 启动项目，查看效果
  

  

  5. 其他模块集成说明
    js 集成文问题难点在于如何绕过 npm 框架引入、使用资源文件，按照前面的方式获取、引入即可。代码的集成和编写方式与 npm 提供的集成方式一致。可以 在 npm官网上查看：https://www.npmjs.com/package/@grapecity/wyn-integration