示例二：集成时自定义组件的外观样式
本文介绍如何创建具有自定义布局的仪表板。
首先，应在仪表板设计器上创建仪表板文档。然后，我们将通过 viewerLite 创建一个自定义布局查看器。
操作介绍
导入 JS 和 CSS 文件
<!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="demo"></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>创建自定义布局
<main id="demo">
<header id="header"></header>
<div class="center-container">
<div class="center" id="center"></div>
<div class="center-scenario" id="scenario-0"></div>
<div class="center-scenario" id="scenario-1"></div>
<div class="center-scenario" id="scenario-2"></div>
<div class="center-scenario" id="scenario-3"></div>
<div class="center-scenario" id="scenario-4"></div>
</div>
<div class="left-panel" id="left-panel">
<div class="left-scenario" id="scenario-5"></div>
<div class="left-scenario" id="scenario-6"></div>
<div class="left-scenario" id="scenario-7"></div>
</div>
</main>这些 html 元素用于连接和控制组件的布局。
添加app.css
app.css
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#demo {
overflow: hidden;
height: 100%;
position: relative;
}
.center-container {
width: 1200px;
height: 400px;
border: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.center {
width: 400px;
height: 400px;
margin: 0 auto;
}
.center-scenario {
width: 300px;
position: absolute;
}
#scenario-0 {
right: 110px;
top: 0;
height: 120px;
}
#scenario-1 {
right: 110px;
top: 130px;
height: 140px;
}
#scenario-2 {
right: 110px;
bottom: 0;
height: 120px;
}
#scenario-3 {
left: 120px;
top: 0;
height: 160px;
}
#scenario-4 {
left: 120px;
bottom: 0;
height: 160px;
}
.left-panel {
position: absolute;
left: 0;
top: 250px;
bottom: 0;
width: 300px;
}
.left-scenario {
height: 200px;
}
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
}创建ViewerLite实例
添加app.js。
app.js
const viewerLiteInstance = WynBi.createViewerLite({
token: 'TOKEN_YOU_GOT_FROM_WYN_SERVER',
baseUrl: 'WYN_SERVER_ADDRESS',
dashboardId: 'xxxxxxxxxxxxxxx',
});
viewerLiteInstance.initialize({
container: document.querySelector('#demo'),
}).then((dash) => {
// connect scenarios
});在Dom上连接组件
app.js
viewerLiteInstance.initialize({
container: document.querySelector('#demo'),
}).then((dash) => {
// prepare scenario doms
const centerDom = document.querySelector('#center');
const headerDom = document.querySelector('#header');
const scenarioDom0 = document.querySelector('#scenario-0');
const scenarioDom1 = document.querySelector('#scenario-1');
const scenarioDom2 = document.querySelector('#scenario-2');
const scenarioDom3 = document.querySelector('#scenario-3');
const scenarioDom4 = document.querySelector('#scenario-4');
const scenarioDom5 = document.querySelector('#scenario-5');
const scenarioDom6 = document.querySelector('#scenario-6');
const scenarioDom7 = document.querySelector('#scenario-7');
// prepare scenario model
const center = dash.getScenarioByName('pivotTable');
const header = dash.getScenarioByName('richEditor');
const scenario0 = dash.getScenarioByName('gauge');
const scenario1 = dash.getScenarioByName('column');
const scenario2 = dash.getScenarioByName('pie');
const scenario3 = dash.getScenarioByName('pie-1');
const scenario4 = dash.getScenarioByName('indicator');
const scenario5 = dash.getScenarioByName('visual');
const scenario6 = dash.getScenarioByName('labelSlicer');
const scenario7 = dash.getScenarioByName('treeMap');
// connect model on dom
center.connect(centerDom);
header.connect(headerDom);
scenario0.connect(scenarioDom0);
scenario1.connect(scenarioDom1);
scenario2.connect(scenarioDom2);
scenario3.connect(scenarioDom3);
scenario4.connect(scenarioDom4);
scenario5.connect(scenarioDom5);
scenario6.connect(scenarioDom6);
scenario7.connect(scenarioDom7);
// make dashboard render
dash.refresh();
});调用方法“ getScenarioByName”，您将获得一个 UIScenario 实例。
Scenario Name 是您在设计器上创建仪表板时为组件设置的组件名称。
最后刷新页面即可获得具有自定义布局的仪表板。
以下是示例的源代码。