1. 内容概述
本文为您简单演示 Viewer Lite（标准版仪表板） 集成的过程。
2. 集成过程
首先，我们应该导入有关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();
});
以下为示例源代码包。
