当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/datagear/article/details/129301662 2024/11/16 2:48:23

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库，加入看板资源中。

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

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

index.html
lib/|-- element-ui@2.15.12/|-- index.js|-- theme-chalk/|-- fonts/|-- element-icons.woff|-- index.css|-- vue@2.7.14/|-- vue.min.js

加入看板资源后，编写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创建的图表元素需采用异步加载方式渲染，因为后台解析看板模板时无法识别它们。

示例效果图如下所示：

在这里插入图片描述

官网地址：

http://www.datagear.tech

源码地址：

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

Github：https://github.com/datageartech/datagear

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

DataGear 在4.3.0版本新增了dg-dashboard-code特性，并在4.4.0版本进行了改进和增强，结合看板API，可以很方便地制作完全由Vue、React等前端框架渲染的数据可视化看板。本文基于Vue2、Element UI前端框架的<el-container>、<el-head…...

编程日记 2023/3/2 17:10:36

JavaFX Scene Builder 下载安装

JavaFX Scene Builder 下载安装1. Scene Builder官网下载2. 安装3. Oracle官网下载Scene Builder 是创建漂亮的用户界面，并将您的设计转化为交互式原型。Scene Builder通过创建可以直接在JavaFX应用程序中使用的用户界面，缩小了设计人员和开发人员之间的…...

编程日记 2023/3/2 17:09:33

dva（轻量级的应用框架）

dva核心知识与实战运用 dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架! 介绍 | DvaJS 易学易用，仅有 6 个 api&…...

编程日记 2023/3/2 17:08:27

数据结构:堆的实现与建堆时间复杂度分析

目录前言一.堆的介绍 1.堆的本质 2.堆的分类二.堆的实现(以小根堆为例) 1.关于二叉树的两组重要结论： 2.堆的物理存储结构框架(动态数组的简单构建) 3. 堆元素插入接口(以小根堆为例) 堆尾元素向上调整的算法接口: 4.堆元素插入接口测试 5.堆元素插入…...

编程日记 2023/3/2 17:07:21

对“车辆销售配置器”的认识与理解

概述中国汽车市场转为存量阶段后，各车企开始从”以产品为中心“转型到”以客户为中心“，产品的个性化配置需求日益丰富。随着竞争的加剧，车企们不仅要提供出色的产品，而且需要提供更加个性化的产品配置和服务，例如&am…...

编程日记 2023/3/2 17:06:17

Linux编译器——gcc/g++（预处理、编译、汇编、链接）

目录 0.程序实现的两大环境 1.gcc如何完成预处理编译汇编链接 2.动态库与静态库对比二者生成的文件大小 3. gcc常用选项 0.程序实现的两大环境任何一个C程序的实现都要经过翻译环境与执行环境。在翻译环境中又分为4个部分，预编译、编译、汇编与链…...

编程日记 2023/3/2 17:05:11

1 纯原生手写图片操作工具类 import java.awt.Dimension; import java.awt.Graphics2D; import java.awt.Image; import java.awt.Rectangle; import java.awt.image.BufferedImage; public class RotateImageUtil {public static BufferedImage rotateImage(BufferedImage bu…...

编程日记 2023/3/2 17:04:05

不能去演唱会现场就多听听耳机里的他们，教你用python来实现一个音乐播放器

前言最近可以说大麦网很知名了，哈哈还有好多想要用Python来搞抢票脚本的怎么说呢也不是不行，但是咱今天可不是来搞这个的，我可不抢票，抢了都去不了，上班搞钱啊铁铁们咱就是说去不了现场，就多听听手机…...

编程日记 2023/3/2 17:02:58

CLion Debug 调试 Makefile 构建的 C 语言程序断点不起作用

最近在研究 jattach，打算在本地调试项目，发现 CLion 可以正常编译运行代码，却无法断点 Debug。由于笔者对 C/C 项目不熟悉，在此记录研究过程中遇到的一些基本问题与解决方法。文章目录解决方式尝试过的手段【未解决】找 Native D…...

编程日记 2023/3/2 17:01:54

·神经网络

目录11神经网络demo112神经网络demo213神经网络demo320tensorflow2.0 安装教程,所有安装工具（神经网络）21神经网络-线性回归- demo122神经网络-线性回归- demo228神经网络-多层感知- demo1目录11神经网络demo1 package com.example.xxx; import java.ut…...

编程日记 2023/3/2 17:00:48

【Java 多线程学习】

多线程学习多线程1. 并行与并发2.进程和线程3. *****多线程的实现方式3.1 继承Thread类的方式进行实现3.2 实现Runnable接口方式进行实现3.3 利用Callable和Future接口方式实现3.4 设置获取线程名字4.获得线程对象5.线程休眠6.线程调度[线程的优先级]7.后台线程/守护线程多线程…...

编程日记 2023/3/2 16:59:43

【计算机考研408】快速排序的趟数问题 + PAT 甲级 7-2 The Second Run of Quicksort

前言该题还未加入PAT甲级题库中，可以通过购买2022年秋季甲级考试进行答题，纯考研题改编快速排序常考的知识点快速排序是基于分治法快速排序是所有内部排序算法中平均性能最优的排序算法快速排序是一种不稳定的排序算法快速排序算法中&#xff0c…...

编程日记 2023/3/2 16:58:37

CSS-Grid（网格）布局

前言之前HTML 页面的布局基本上都是通过 Flexbox 来实现的，能轻松的解决复杂的 Web 布局。现在又出现了一个构建 HTML 最佳布局体系的新竞争者。就是强大的CSS Grid 布局。 grid和flex区别是什么？适用什么场景？ Flexbox 是一维布局系统&am…...

编程日记 2023/3/2 16:57:28

软件测试4

一 form表单标签 1.form表单标签里面就是所有用户填写的表单数据； action“xxx.py”把表单数据提交给哪一个后台程序去处理 method“post” 传递数据时候的方式方法，post代表隐式提交数据、get明文传送数据 2.input标签的type类型 type“text” 普通的输…...

编程日记 2023/3/2 16:56:24

996的压力下，程序员还有时间做副业吗？

996怎么搞副业？ 这个问题其实蛮奇怪的：996的压力下，怎么会还想着搞副业呢？ 996还想搞副业的原因有哪些？ 大家对于996应该都不陌生，总结就是一个字：忙。 996的工作性质就是加班，就…...

编程日记 2023/3/2 16:55:13

每日学术速递3.1

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Directed Diffusion: Direct Control of Object Placement through Attention Guidance 标题：定向扩散：通过注意力引导直接控制物体放置作者：…...

编程日记 2023/3/2 16:54:08

金融行业数据模型

一、Teradata FS-LDM Teradata 公司基于金融业务发布的FS-LDM（Financial Servies Logical Data Model） 十大主题：当事人、产品、协议、事件、资产、财务、机构、地域、营销、渠道。 1、当事人（Party） 银行所服务的任…...

编程日记 2023/3/2 16:53:03

【面试题】2023前端vue面试题及答案

Vue3.0 为什么要用 proxy？在 Vue2 中， 0bject.defineProperty 会改变原始数据，而 Proxy 是创建对象的虚拟表示，并提供 set 、get 和 deleteProperty 等处理器，这些处理器可在访问或修改原始对象上的属性时进行拦截&…...

编程日记 2023/3/2 16:51:56

(哈希查找)leetcode128. 最长连续序列

文章目录一、题目1、题目描述2、基础框架3、原题链接二、解题报告1、思路分析2、时间复杂度3、代码详解三、本题小知识一、题目 1、题目描述给定一个未排序的整数数组 nums ，找出数字连续的最长序列（不要求序列元素在原数组中连续）的长度。…...

编程日记 2023/3/2 16:50:53

js中splice方法和slice方法

splice方法用来操作数组splice(startIndex,deleteNum,item1,....,)此操作会改变原数组。删除数组中元素参数解释：startIndex为起始index索引。deleteNum为从startIndex索引位置开始需要删除的个数。分三种情况：没有传第三个参数的情况下，dele…...

编程日记 2023/3/2 16:49:47

c++ argparse

需求 c程序传参数，像python中argparse一样方便。方法1 用gflags 参考https://heroacool.blog.csdn.net/?typeblog git clone https://github.com/gflags/gflags cd gflags # 进入项目文件夹 cmake . # 使用 cmake 编译生成 Makefile 文件 make -j 24 # make 编…...

编程日记 2023/3/2 16:48:44

内大892复试真题16年

内大892复试真题16年 1. 输出三个数中较大数2. 求两个数最大公约数与最小公倍数3. 统计字符串中得字符个数4. 输出菱形5. 迭代法求平方根6. 处理字符串(逆序、进制转换)7. 寻找中位数8. 输入十进制输出n进制1. 输出三个数中较大数问题代码 #include <iostream>usin…...

编程日记 2023/3/2 16:47:40

面试题 05.02. 二进制数转字符串

二进制数转字符串。给定一个介于0和1之间的实数（如0.72），类型为double，打印它的二进制表达式。如果该数字无法精确地用32位以内的二进制表示，则打印“ERROR”。示例1: 输入：0.625输出："0…...

编程日记 2023/3/2 16:46:32

MySQL数据更新操作

文章目录前言添加数据插入数据删除数据修改数据前言提示：这里可以添加本文要记录的大概内容： 数据更新有两种办法： 1：使用数据可视化工具操作 2：SQL语句添加数据前面的添加数据命令一次只能插入一条记录。如果想…...

编程日记 2023/3/2 16:45:28

C# 封装

修正bug之前总是要考虑是什么导致了这个bug，并花些时间了解发生了什么。增加打印输出行的语句可能是一个很有效的调试工具。增加语句来打印诊断信息时，要使用Debug.WriteLine。构造器是CLR第一次创建一个新对象实例时调用的方法。字符串插值会让字符串拼…...

编程日记 2023/3/2 16:44:21

每日学术速递3.2

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Interactive Segmentation as Gaussian Process Classification(CVPR 2023) 标题：作为高斯过程分类的交互式分割作者：Minghao Zhou, Hong Wang, Qian Zha…...

编程日记 2023/3/2 16:43:17

PCBA方案设计——LCD体重电子秤方案

体重秤，一种测量体重的电子秤，与最近很火的体脂秤来比来说，他是的功能能就有点单一了，只能测量体重，而体脂秤可以精准抓取测量体脂体重等一系列的数据，功能更为多样，但相比之下体重秤的功能简单…...

编程日记 2023/3/2 16:42:13

动态规划--背包问题

动态规划背包问题算法思路代码实现背包问题假设你要去野营。你有一个容量为6磅的背包，需要决定该携带下面的哪些东西。其中每样东西都有相应的价值，价值越大意味着越重要：  水（重3磅，价值10）  书&…...

编程日记 2023/3/2 16:41:08

从0开始学python -45

Python3 正则表达式 -3 正则表达式对象 re.RegexObject re.compile() 返回 RegexObject 对象。 re.MatchObject group() 返回被 RE 匹配的字符串。 start() 返回匹配开始的位置end() 返回匹配结束的位置span() 返回一个元组包含匹配 (开始,结束) 的位置正则表达式修饰符…...

编程日记 2023/3/2 16:39:58