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/element-ui@2.15.12/theme-chalk/index.css">
<script src="lib/vue@2.7.14/vue.min.js"></script>
<script src="lib/element-ui@2.15.12/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
创建的图表元素需采用异步加载方式渲染,因为后台解析看板模板时无法识别它们。
示例效果图如下所示:
官网地址:
源码地址: