Wyn V6.0 帮助文档
页面树结构
进行全文检索
转至元数据结尾
转至元数据起始

1. 内容概述


本文介绍如何创建具有自定义布局的仪表板。

首先，应在仪表板设计器上创建仪表板文档。然后，我们将通过 viewerLite 创建一个自定义布局查看器。


2. 操作步骤

导入 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 是您在设计器上创建仪表板时为组件设置的组件名称。


最后刷新页面即可获得具有自定义布局的仪表板。

以下是示例的源代码。

custom_layout.zip



  • 无标签