推广 热搜: 红书  page  数据  数据分析  关键词  搜索  小红  哪些  考试  论文 

DataGear 制作基于Vue前端框架渲染的数据可视化看板

   日期:2025-01-01     移动:https://sicmodule.kub2b.com/mobile/quote/17505.html

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

本文地址:https://sicmodule.kub2b.com/quote/17505.html     企库往 https://sicmodule.kub2b.com/ , 查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


0相关评论
相关最新动态
推荐最新动态
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号