DataGear 在4.3.0版本新增了特性，并在4.4.0版本进行了改进和增强，结合看板API，可以很方便地制作完全由Vue、React等前端框架渲染的数据可视化看板。

本文基于Vue2、Element UI前端框架的、、、、等布局组件定义整个看板页面，并异步加载由Vue的语法构建的图表元素。

首先，新建空白看板，填写名称后，先保存。

在编写看板页面之前，需要先下载 Vue2、Element UI库，加入看板资源中。

Vue2下载地址：

https://unpkg.com/vue@2.7.14/dist/vue.min.js

Element UI下载地址：

https://unpkg.com/element-ui@2.15.12/lib/theme-chalk/index.css

https://unpkg.com/element-ui@2.15.12/lib/index.js

https://unpkg.com/element-ui@2.15.12/lib/theme-chalk/fonts/element-icons.woff

加入后的看板资源如下所示：

加入看板资源后，编写内容如下：

保存，看板制作完成！

上述看板代码中：

设置看板页面加载后，仅创建看板JS对象，不执行初始化和渲染，因为在Vue挂载完成之前页面真正的DOM元素是不可用的。

设置函数允许异步加载的图表，避免越权访问。

在Vue挂载完成后执行看板渲染，因为此时才可以访问页面真正的DOM元素。

元素里面通过创建的图表元素需采用异步加载方式渲染，因为后台解析看板模板时无法识别它们。

示例效果图如下所示：

官网地址：

http://www.datagear.tech

源码地址：

Gitee：https://gitee.com/datagear/datagear