DataGear 数据可视化看板整合前端框架Vue
DataGear 看板JS对象的loadUnsolvedCharts()函数，用于异步加载页面端动态生成的图表元素，利用它，可以很方便整合Angular、React、Vue等前端框架。
本文以Vue为例，详细介绍如何进行整合。
首先，点击看板管理页面的【添加】按钮，新建一个看板，HTML模板内容如下：
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
</body>
</html>
保存后，点击看板添加页面右侧的上传资源图标按钮，上传Vue库看板资源（管理员可上传看板全局资源，看板中可直接引入），上传后看板资源列表为：
index.html
vue-2.6.12.js
然后，在看板HTML模板中引入Vue库：
<!DOCTYPE html>
<html>
<head>
...
<script src="vue-2.6.12.js"></script>
</head>
<body>
</body>
</html>
最后，编写Vue组件，并在Vue渲染完成后，调用loadUnsolvedCharts()函数异步加载图表：
<!DOCTYPE html>
<html dg-loadable-chart-widgets="all">
<head>
...
<script src="vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
<div v-for="chartId in chartIds" v-bind:dg-chart-widget="chartId" style="width:300px;height:300px;"></div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
chartIds: ['图表部件ID-0', '图表部件ID-1', '图表部件ID-2']
},
mounted: function()
{
dashboard.loadUnsolvedCharts();
}
});
</script>
官网地址：
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
DataGear 数据可视化看板整合前端框架Vue的更多相关文章
- 13个可实现超棒数据可视化效果的Javascript框架
随着商业及其相关需求的发展,数据成为越来越重要的元素之一,为了更加直观和明显的展示商业潜在的趋势和内在的特性,我们需要使用图表和图形的方式来直观动态的展示数据内在秘密,在今天的这篇文章中我们推荐12款 ...
- 前端框架vue.js系列（9）：Vue.extend、Vue.component与new Vue
前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 前端框架 Vue 初探
一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...
- 可能是目前最完整的前端框架 Vue.js 全面介绍
Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架. 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angul ...
- 前端框架VUE——安装及初始化
本篇文章适合,想要学习 vue,但对 vue 又没有接触过的同学阅读,是非常基础的内容.告诉大家使用 vue 时的安装方式,及如何创建实例,展示内容. 一.安装方式 vue 是一种前端框架,所以使用前 ...
- 【入门篇】前端框架Vue.js知识介绍
一.Vue.js介绍 1.什么是MVVM? MVVM(Model-View-ViewModel)是一种软件架构设计模式,它源于MVC(Model-View-Controller)模式,它是一种思想,一 ...
- 前端框架VUE
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- 前端框架 Vue.js 概述
Vue.js 是什么 图片 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视 ...
随机推荐
- 使用Docker快速搭建InnoDB Cluster集群的过程
感谢 感谢方神的大力帮助,自己对数据库基本一窍不通.只是照葫芦画瓢做出来的. 感谢来自如下两个网站的资料,我进行了一定程度的融合. https://blog.csdn.net/weixin_43972 ...
- kubeadm 搭建 k8s 时用到的常用命令汇总
简单记录一下 kubeadm config images list 修改镜像名称 docker tag registry.cn-hangzhou.aliyuncs.com/google_contain ...
- java浅拷贝BeanUtils.copyProperties引发的RPC异常 | 京东物流技术团队
背景 近期参与了一个攻坚项目,前期因为其他流程原因,测试时间已经耽搁了好几天了,本以为已经解决了卡点,后续流程应该顺顺利利的,没想到 人在地铁上,bug从咚咚来~ 没有任何修改的服务接口,抛出异常: ...
- js判断一个时间是否在某一个时间段内
很多时候,我们需要对时间进行处理: 比如说:获取当前的时间 判断某一个时间是否在一段时间内:如果在显示出某一个按钮: 让用户可以操作:如果不在,按钮隐藏 这个时候,我们就需要对时间进行处理了 < ...
- 【JS 逆向百例】拉勾网爬虫，traceparent、__lg_stoken__、X-S-HEADER 等参数分析
关注微信公众号:K哥爬虫,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后 ...
- Go 匿名函数与闭包
Go 匿名函数与闭包 匿名函数和闭包是一些编程语言中的重要概念,它们在Go语言中也有重要的应用.让我们来详细介绍这两个概念,并提供示例代码来帮助理解. 目录 Go 匿名函数与闭包 一.匿名函数(Ano ...
- 【一】gym环境安装以及安装遇到的错误解决
相关文章: [一]gym环境安装以及安装遇到的错误解决 [二]gym初次入门一学就会-简明教程 [三]gym简单画图 [四]gym搭建自己的环境,全网最详细版本,3分钟你就学会了! [五]gym搭建自 ...
- 【深度学习项目二】卷积神经网络LeNet实现minst数字识别
相关文章: [深度学习项目一]全连接神经网络实现mnist数字识别 [深度学习项目二]卷积神经网络LeNet实现minst数字识别 [深度学习项目三]ResNet50多分类任务[十二生肖分类] 『深度 ...
- blazor maui hybrid app显示本地图片
啊... ... 一通操作下来感觉就是两个字 折磨 跨平台有跨平台的好处 但框架本身支持的有限 很多东西做起来很曲折 哎 这里总结一下笔者为了折腾本地图片显示的尝试 为什么要做本地图片展示呢 如果是做 ...
- Arduino语言基础（萌新）
Arduino语言基础(萌新) Arduino语言注解Arduino语言是建立在C/C++基础上的,其实也就是基础的C语言,Arduino语言只不过把AVR单片机(微控制器)相关的一些参数设置都函数化 ...