DataGear 在4.3.0版本新增了dg-dashboard-code特性，並在4.4.0版本進行了改進和增強，結合看板API，可以很方便地製作完全由Vue、React等前端框架渲染的數據可視化看板。
本文基於Vue2、Element UI前端框架的<el-container>、<el-header>、<el-aside>、<el-main>、<el-row>等佈局組件定義整個看板頁面，並異步加載由Vue的v-for語法構建的圖表元素。
首先，新建空白看板，填寫名稱後，先保存。
在編寫看板頁面之前，需要先下載 Vue2、Element UI庫，加入看板資源中，具體下載地址和操作方式參考文章：
DataGear 製作基於 Vue2、Element UI 彈窗效果的數據可視化看板
加入看板資源後，編寫index.html內容如下：
<!DOCTYPE html>
<html dg-dashboard-code="instance" dg-loadable-chart-widgets="異步加載圖表部件ID-1,異步加載圖表部件ID-2">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="lib/[email protected]/theme-chalk/index.css">
<script src="lib/[email protected]/vue.min.js"></script>
<script src="lib/[email protected]/index.js"></script>
</head>
<body dg-chart-auto-resize="true" style="margin:0;">
<div id="app">
<el-container style="height:100vh">
<el-header style="text-align:center;font-weight:bold;font-size:2rem;">DataGear看板示例</el-header>
<el-main>
<el-container style="height:100%;">
<el-aside>
<div id="v-for-charts">
<div v-for="chartId in loadChartIds" v-bind:dg-chart-widget="chartId" style="height:40vh;"></div>
</div>
</el-aside>
<el-main>
<el-row :gutter="20" style="height:100%;">
<el-col :span="12" style="height:100%;">
<div style="height:100%;" dg-chart-widget="圖表部件ID-1"></div>
</el-col>
<el-col :span="12" style="height:100%;">
<div style="height:100%;" dg-chart-widget="圖表部件ID-2"></div>
</el-col>
</el-row>
</el-main>
</el-container>
</el-main>
</el-container>
</div>
</body>
</html>
<script>
new Vue(
{
el: '#app',
data()
{
let d =
{
loadChartIds: ["異步加載圖表部件ID-1", "異步加載圖表部件ID-2"]
};
return d;
},
mounted()
{
dashboard.render();
dashboard.loadUnsolvedCharts("#v-for-charts");
}
});
</script>
保存，看板製作完成！
上述看板代碼中：
dg-dashboard-code="instance"
設置看板頁面加載後，僅創建看板JS對象，不執行初始化和渲染，因爲在Vue掛載完成之前頁面真正的DOM元素是不可用的。
dg-loadable-chart-widgets='...'
設置dashboard.loadUnsolvedCharts()函數允許異步加載的圖表，避免越權訪問。
dashboard.render();
在Vue掛載完成後執行看板渲染，因爲此時纔可以訪問頁面真正的DOM元素。
dashboard.loadUnsolvedCharts("#v-for-charts");
#v-for-charts元素裏面通過v-for創建的圖表元素需採用異步加載方式渲染，因爲後臺解析看板模板時無法識別它們。
示例效果圖如下所示： 
官網地址：
源碼地址：