示例一：使用标准分析模式集成仪表板

本文为您简单演示 Viewer Lite（标准版仪表板）集成的过程。

集成过程

首先，我们应该导入有关viewerLite的js和css文件。

然后添加div＃viewerlite-container和div＃dashboard-container。

div＃viewerlite-container用于创建查看器lite的实例。

div＃dashboard-container用于连接仪表板。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Viewer Lite Demo</title>
    <!- viewerLite css file ->
    <link rel="stylesheet" href="/dist/dashboard.viewerLite.css" />
    <link rel="stylesheet" href="/dist/dashboard.viewerLite.vendor.css" />
    <!- your code in app.css ->
    <link rel="stylesheet" href="/static/app.css" />
</head>
<body>
    <main id="viewerlite-container">
        <div id="dashboard-container">
        </div>
    </main>
    <!- viewerLite js file ->
    <script src="/dist/dashboard.libs.common.js"></script>
    <script src="/dist/dashboard.libs.chart.js"></script>
    <script src="/dist/dashboard.libs.sheet.js"></script>
    <script src="/dist/dashboard.viewerLite.js"></script>
    <!- your code in app.js ->
    <script src="/static/app.js"></script>
</body>
</html>

这是一个简单的css文件。只设置基本的布局风格。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#viewerlite-container,
#dashboard-container {
  overflow: hidden;
  height: 100%;
  position: relative;
}

创建一个viewerLite实例。Token 令牌和 baseUrl 用于与其他系统集成。

dashboardId是必需的。初始化实例，它将返回一个promise。然后，您将获得一个 UIDashboard 实例。

将此实例与 dom 连接。刷新即可看到文档。

最后，请销毁实例。

const viewerLiteInstance = WynBi.createViewerLite({
  token: 'TOKEN_YOU_GOT_FROM_WYN_SERVER',
  baseUrl: 'WYN_SERVER_ADDRESS',
  dashboardId: 'xxxxxxxxxxxxxxx',
});
viewerLiteInstance.initialize({
  container: document.querySelector('#viewerlite-container'),
}).then((dash) => {
  document.title= dash.getName();
  const dashboardDom = document.querySelector('#dashboard-container');
  dash.connect(dashboardDom);
  dash.refresh();
});
window.addEventListener('beforeunload', (e) => {
  viewerLiteInstance.destroy();
});

以下为示例源代码包。

dashboard.zip