DataGear 制作基于Vue前端框架渲染的数据可视化看板
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…...
JavaFX Scene Builder 下载安装
JavaFX Scene Builder 下载安装1. Scene Builder官网下载2. 安装3. Oracle官网下载Scene Builder 是创建漂亮的用户界面，并将您的设计转化为交互式原型。Scene Builder通过创建可以直接在JavaFX应用程序中使用的用户界面，缩小了设计人员和开发人员之间的…...
dva（ 轻量级的应用框架 ）
dva核心知识与实战运用 dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架! 介绍 | DvaJS 易学易用，仅有 6 个 api&…...
数据结构:堆的实现与建堆时间复杂度分析
目录 前言 一.堆的介绍 1.堆的本质 2.堆的分类 二.堆的实现(以小根堆为例) 1.关于二叉树的两组重要结论： 2.堆的物理存储结构框架(动态数组的简单构建) 3. 堆元素插入接口(以小根堆为例) 堆尾元素向上调整的算法接口: 4.堆元素插入接口测试 5.堆元素插入…...
对“车辆销售配置器”的认识与理解
概述 中国汽车市场转为存量阶段后，各车企开始从”以产品为中心“转型到”以客户为中心“，产品的个性化配置需求日益丰富。随着竞争的加剧，车企们不仅要提供出色的产品，而且需要提供更加个性化的产品配置和服务，例如&am…...
Linux编译器——gcc/g++（预处理、编译、汇编、链接）
目录 0.程序实现的两大环境 1.gcc如何完成 预处理 编译 汇编 链接 2.动态库与静态库 对比二者生成的文件大小 3. gcc常用选项 0.程序实现的两大环境 任何一个C程序的实现都要经过翻译环境与执行环境。 在翻译环境中又分为4个部分，预编译、编译、汇编与链…...
Java 操作图片进行缩放旋转翻转加水印
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…...
不能去演唱会现场就多听听耳机里的他们，教你用python来实现一个音乐播放器
前言 最近可以说大麦网很知名了，哈哈还有好多想要用Python来搞抢票脚本的 怎么说呢也不是不行，但是咱今天可不是来搞这个的，我可不抢票，抢了都去不了，上班搞钱啊铁铁们 咱就是说去不了现场，就多听听手机…...
CLion Debug 调试 Makefile 构建的 C 语言程序断点不起作用
最近在研究 jattach，打算在本地调试项目，发现 CLion 可以正常编译运行代码，却无法断点 Debug。由于笔者对 C/C 项目不熟悉，在此记录研究过程中遇到的一些基本问题与解决方法。 文章目录解决方式尝试过的手段【未解决】找 Native D…...
·神经网络
目录11神经网络demo112神经网络demo213神经网络demo320tensorflow2.0 安装教程,所有安装工具（神经网络）21神经网络-线性回归- demo122神经网络-线性回归- demo228神经网络-多层感知- demo1目录11神经网络demo1 package com.example.xxx; import java.ut…...
【Java 多线程学习】
多线程学习多线程1. 并行与并发2.进程和线程3. *****多线程的实现方式3.1 继承Thread类的方式进行实现3.2 实现Runnable接口方式进行实现3.3 利用Callable和Future接口方式实现3.4 设置获取线程名字4.获得线程对象5.线程休眠6.线程调度[线程的优先级]7.后台线程/守护线程多线程…...
【计算机考研408】快速排序的趟数问题 + PAT 甲级 7-2 The Second Run of Quicksort
前言 该题还未加入PAT甲级题库中，可以通过购买2022年秋季甲级考试进行答题，纯考研题改编 快速排序 常考的知识点 快速排序是基于分治法快速排序是所有内部排序算法中平均性能最优的排序算法快速排序是一种不稳定的排序算法快速排序算法中，…...
CSS-Grid（网格）布局
前言 之前HTML 页面的布局基本上都是通过 Flexbox 来实现的，能轻松的解决复杂的 Web 布局。 现在又出现了一个构建 HTML 最佳布局体系的新竞争者。就是强大的CSS Grid 布局。 grid和flex区别是什么？适用什么场景？ Flexbox 是一维布局系统&am…...
软件测试4
一 form表单标签 1.form表单标签里面就是所有用户填写的表单数据； action“xxx.py”把表单数据提交给哪一个后台程序去处理 method“post” 传递数据时候的方式方法，post代表隐式提交数据、get明文传送数据 2.input标签的type类型 type“text” 普通的输…...
996的压力下，程序员还有时间做副业吗？
996怎么搞副业？ 这个问题其实蛮奇怪的：996的压力下，怎么会还想着搞副业呢？ 996还想搞副业的原因有哪些？ 大家对于996应该都不陌生，总结就是一个字：忙。 996的工作性质就是加班，就…...
每日学术速递3.1
CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Directed Diffusion: Direct Control of Object Placement through Attention Guidance 标题：定向扩散：通过注意力引导直接控制物体放置 作者：…...
金融行业数据模型
一、Teradata FS-LDM Teradata 公司基于金融业务发布的FS-LDM（Financial Servies Logical Data Model） 十大主题：当事人、产品、协议、事件、资产、财务、机构、地域、营销、渠道。 1、当事人（Party） 银行所服务的任…...
【面试题】2023前端vue面试题及答案
Vue3.0 为什么要用 proxy？在 Vue2 中， 0bject.defineProperty 会改变原始数据，而 Proxy 是创建对象的虚拟表示，并提供 set 、get 和 deleteProperty 等处理器，这些处理器可在访问或修改原始对象上的属性时进行拦截&…...
leetcode128. 最长连续序列)
(哈希查找)leetcode128. 最长连续序列
文章目录一、题目1、题目描述2、基础框架3、原题链接二、解题报告1、思路分析2、时间复杂度3、代码详解三、本题小知识一、题目 1、题目描述 给定一个未排序的整数数组 nums ，找出数字连续的最长序列（不要求序列元素在原数组中连续）的长度。…...
js中splice方法和slice方法
splice方法用来操作数组splice(startIndex,deleteNum,item1,....,)此操作会改变原数组。删除数组中元素参数解释：startIndex为起始index索引。deleteNum为从startIndex索引位置开始需要删除的个数。分三种情况：没有传第三个参数的情况下，dele…...
CentOS7快速部署Golang 1.22.2开发环境全攻略
1. 为什么选择CentOS7部署Golang 1.22.2 最近在帮团队搭建新的开发环境时，我发现很多同事还在用老旧的Golang版本。作为目前最稳定的Linux发行版之一，CentOS7依然是企业级开发环境的首选。而Golang 1.22.2作为2024年发布的最新稳定版，带来了不…...
MedGemma 1。5在Linux环境下的部署与优化
MedGemma 1.5在Linux环境下的部署与优化 1. 引言 MedGemma 1.5是谷歌最新发布的开源医疗AI模型，专门针对医学影像和文本数据处理进行了深度优化。这个40亿参数的轻量级模型不仅能处理CT、MRI等三维医学影像，还能分析病理切片和电子健康记录，…...
AutoDock Vina特殊金属元素对接技术指南：从问题诊断到方案落地
AutoDock Vina特殊金属元素对接技术指南：从问题诊断到方案落地 【免费下载链接】AutoDock-Vina AutoDock Vina 项目地址: https://gitcode.com/gh_mirrors/au/AutoDock-Vina 问题溯源：金属元素对接的技术瓶颈 在分子对接实践中，科研人…...
OpenClaw进阶：利用GLM-4.7-Flash实现复杂任务链式执行
OpenClaw进阶：利用GLM-4.7-Flash实现复杂任务链式执行 1. 为什么需要链式任务执行 上周我在整理项目文档时，遇到了一个典型的多步骤任务：需要从十几个Markdown文件中提取关键数据，整理成Excel表格，然后根据内容生成分…...
【FastAPI 2.0流式AI响应核心机密】：3大异步协程调度陷阱、2处EventSource底层劫持点、1个未公开的StreamingResponse状态机设计缺陷
第一章：FastAPI 2.0流式AI响应的架构演进与设计哲学FastAPI 2.0 将流式响应能力从实验性支持提升为核心原语，其底层重构了 Starlette 的响应生命周期与事件循环集成机制，使 Server-Sent Events（SSE）、text/event-strea…...
深度解析ConcurrentHashMap设计演进：从分段锁到无锁化的并发之路
在Java并发编程领域，ConcurrentHashMap绝对是“并发容器扛鼎之作”——它既解决了HashMap并发环境下的数据不一致（死循环、数据丢失）问题，又突破了Hashtable全表锁的性能瓶颈，成为高并发场景下K-V存储的首选。自JDK1.5…...
1.1 AI技术全景图：从传统ML到大模型
AI技术全景图：从传统ML到大模型本文适合谁：完全没有AI背景的读者。读完这篇，你会知道"AI/机器学习/深度学习/大模型"这几个词是什么关系，以及你将要学的东西在整个AI世界里处于什么位置。AI发展经历了三个时代——本文带…...
Qt 5.12.8在Linux下编译qtvirtualkeyboard模块，我踩过的那些坑（附完整解决方案）
Qt 5.12.8在Linux下编译qtvirtualkeyboard模块的深度实践指南 当你在嵌入式或跨平台开发中突然发现系统自带的Qt缺少虚拟键盘模块时，那种感觉就像在沙漠里找到一瓶水却发现没带开瓶器。本文将带你深入探索在aarch64架构的Linux系统中，如何为预装的Qt 5.1…...
避坑指南：用ESP32驱动LD2420毫米波雷达时，串口数据丢失和自动开机卡死的那些事儿
ESP32与LD2420毫米波雷达深度避坑实战：从数据丢失到系统卡死的全链路解决方案 当你在凌晨三点盯着逻辑分析仪上那些残缺的串口波形时，就会明白为什么LD2420毫米波雷达被称为"最熟悉的陌生人"。这个能穿透墙壁感知呼吸的24GHz传感器，…...
Adafruit DPS310传感器驱动库深度解析与嵌入式实践
1. Adafruit DPS310 压力传感器驱动库深度解析与工程实践 1.1 项目定位与硬件基础 Adafruit DPS310 是一款高精度、低功耗的数字气压/温度传感器，基于 Infineon（原 Bosch Sensortec）DPS310 芯片设计。该芯片采用 MEMS 技术，集成…...