【嵌入式-集成配置】Wyn中组件如何被外部引用

       本次文档，主要用来解决适合深度集成的客户需要。

       客户需求为：

                    1.通过 API 调用 Wyn 的数据分析服务。

                    2.获取 Wyn 中所有报表，仪表，在自己项目中可以访问，管理。

                    3.集成到自己项目中的BI组件，可以实现跟在Wyn中相同的效果。

                    4.在自己项目中引用 Wyn 中 viz 组件。

       根据客户提出的几个深入集成的问题，如果对与Wyn只是会用的阶段。那么实现起来确实有点困难。但是Wyn不仅仅是一个实现报表的软件，更是一套开发工具。只需要我们在使用过程中做几步配置，写点代码，就可以完成以上几个功能。

       我们知道，wyn中有相对成熟的api，通过api我们几乎可以实现所有Wyn中的功能。Api地址：http://wyn.grapecity.com.cn/WynApiDemo/api-index.html。

       那么针对客户本次遇到的问题，我们该如何实现呢。话不多说，上步骤。后面会附带源码。不喜欢看文章的直接下载源码。

       实现效果为：

       第一步：获取Wyn中所有的文档数据，仪表板类型为：dbd。将数据加载到仪表板下拉框中。

$(function() {
    fetch("http://localhost:51980/api/graphql?token=c4a0359a5bcca74b98b866e44d543a02bcf7c8a02d723402ee3bcfec6410cad8", {
        "method": "POST",
        "headers": {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        "mode": "cors",
        "body": "{\"query\":\"query {documents(orderby: \\\"+name\\\") {id,type,title,ext,created,created_by {name, email},modified,modified_by {name,email},effective_ops}}\"}"
    }).then(function(res) {
        res.json()
            .then(function(data) {
                var arr = data.data.documents.filter(function(p) {
                    return p.type == "dbd";
                });
                arr.forEach((v, i) => {
                    $("#sel_dbd").append("<option value='" + v.id + "'>" + v.title + "</option>");
                });
            });
    });
});

       第二步：给仪表板下拉框增加onchange事件，选择后加载仪表板中所有组件。并将组件名称添加到组件下拉框中。

function loadItem() {
    var dbid = $("#sel_dbd").val();
    fetch("http://localhost:51980/api/dashboards/" + dbid + "?token=2d64f7f419cc1d829c1d62e9696e19c812730208804fa7da03058541df4ee4ce", {
        "method": "get",
        "headers": {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },

    }).then(function(res) {
        res.json()
            .then(function(data) {
                console.log(data);
                $("#sel_item").empty();
                data.scenarios.forEach((v, i) => {
                    $("#sel_item").append("<option value='" + v.name + "'>" + v.name + "</option>");
                });
            });
    });
}

       第三步：给组件下拉框增加onchange事件，中间加载仪表板绑定代码，用以div集成。

function loadDivHtml() {
    $('#viewer').html('');

    var baseUrl = 'http://localhost:51980/';
    var token = "25e06d43796485bf0cd9a90f4307dfe9c26e6372f30006696b2792db834f2452";

    var viewer = WynBi.create('DashboardViewer', {
        edition: 'ZH',
        containerFilterScope: '',
        version: '1.0.0',
        userId: 'anonymous_user',
        lng: 'zh',
        baseUrl,
        token,
        "scenario": $("#sel_item").val(),
        "dashboardId": $("#sel_dbd").val(),
        "token": "25e06d43796485bf0cd9a90f4307dfe9c26e6372f30006696b2792db834f2452",
        "size": "fitToScreen",
        "actions": "clearselection,focus,annotation,export,filter,clearruntimefilter,sort,rank,convertvisual,options.property.conditionalformat,options.property.referenceline,options.property.trendlines,options.property.expand,showdata,analysispath",
        "openfulldashboardmode": "newwindow"
    });
    viewer.initialize({
        container: document.querySelector('#viewer'),
        onClose: () => {
            console.log('close');
        },
        onLoaded: (docName) => {
            console.log('loaded', docName);
        },
    });
    document.createElement('script')

}

       第四步：代码中需要几步设置，详情参考：https://help.grapecity.com.cn/pa ... ion?pageId=57503205

    功能源码： dashboard_0630.zip (6.78 MB, 下载次数: 3, 售价: 20 金币)

2021-6-28 18:16 上传

点击文件名下载附件
集成源码

  

  以上功能，详细代码如下。相信通过此案例，你会对wyn的集成有更深一步的理解。关于Wyn的集成方式，我们有更详细的集成方案

  https://help.grapecity.com.cn/pa ... ion?pageId=57502953。

支持一下！