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

vue大屏展示组件库datav

主要用于构建大屏数据展示页面,具有多种类型组件可供使用。详情参考 datav官网

一、安装
  • npm 安装
npm install @jiaminghi/data-view
  • yarn安装
yarn add @jiaminghi/data-view
二、使用

在main.js中注册为全局组件

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

按需引入

import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

除了可以使用的边框、装饰等之外,还有基于Charts封装的图表

<dv-charts :option="option" />

只需要将对应图表option数据传入组件即可,可参考:

Charts实例
Charts配置项

三、注意项
1、 兼容性

推荐使用Chrome浏览器。Datav 在设计和开发时主要针对Chrome浏览器进行了测试和优化,因为Chrome在支持现代前端技术和性能方面表现出色。不过Datav的开发团队通常会确保其在主流浏览器中的正常运行,包括但不限于 Chrome、Firefox、Safari 和 Edge。这意味着你可以在这些浏览器上使用 Datav 开发的可视化大屏项目,并且可以期待良好的用户体验。

2、高度异常

组件的默认宽高都是100%,可以根据父容器宽高进行自适应,但在某些情况下组件宽高可能表现异常,这种情况一般是因为组件的父容器宽高发生了变化,而组件没有侦知这一变化,你可以在组件上绑定key值,在更改父容器宽高且页面完成重绘后(使用$nextTick),更新key值,使组件强制刷新,以获取正确宽高。

<dv-active-ring-chart :config="config" :key="key" />
data() {return {key: 0}
},
mounted () {let that = thiswindow.addEventListener('resize', () => {that.$nextTick(() => {that.key++})})}
3、状态更新

避免你的组件更新了数据后,状态却不刷新,也就是没变化,请务必看这里
组件props均未设置deep监听,刷新props时,请直接生成新的props对象(基础数据类型除外),或完成赋值操作后使用ES6拓展运算符生成新的props对象(this.someProps = { …this.someProps })。

四、扩展
1、如何选择Datav与echarts

① 项目需求和复杂度
如果项目需要处理复杂的数据逻辑、大规模数据展示或实时数据更新,可能需要选择 DataV,DataV 提供了更多高级的数据处理和展示功能。
② 快速开发需求
如果项目需要快速开发和迭代,而开发团队对 ECharts 的配置和使用不是很熟悉,DataV 提供的可视化编辑器和模板化设计可以节省大量时间。

2、搭配 v-scale-screen组件一起使用

虽然 DataV 本身具有一定的自适应和响应式设计,但是它具有一定的局限性。它的全屏容器将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。建议在全屏容器内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。使用前请注意将body的margin设为0,否则会引起计算误差,全屏后不能完全充满屏幕。

<dv-full-screen-container>content</dv-full-screen-container>
  • 全屏展示和缩放处理
    v-scale-screen 组件提供了更加灵活和高级的全屏展示功能,可以确保可视化效果的一致性和适应性。
  • 定制化和扩展功能
    v-scale-screen 提供了额外的定制化能力,可以根据具体的需求进行配置和调整。它允许开发者定义全屏模式下的交互行为、动画效果以及界面布局,这些功能可能在 DataV 默认功能中不够满足需求。
  • 用户体验优化
    在某些应用场景下,特别是展示大量数据或者复杂交互需求的项目中,使用 v-scale-screen 能够提升用户的操作体验和数据展示的清晰度。它支持更精细的视图缩放和响应式设计,使得用户可以更自然地浏览和分析数据。

可参考 大屏自适应容器组件 v-scale-screen

相关文章:

vue大屏展示组件库datav

主要用于构建大屏数据展示页面&#xff0c;具有多种类型组件可供使用。详情参考 datav官网 一、安装 npm 安装 npm install jiaminghi/data-viewyarn安装 yarn add jiaminghi/data-view二、使用 在main.js中注册为全局组件 import dataV from jiaminghi/data-view Vue.us…...

Vue.js 与 Ajax(vue-resource)的集成应用

Vue.js 与 Ajax&#xff08;vue-resource&#xff09;的集成应用 Vue.js 是一款流行的前端JavaScript框架&#xff0c;以其简洁、灵活和高效的特点而受到开发者的喜爱。在实际开发中&#xff0c;与后端服务的通信是不可或缺的&#xff0c;而Ajax技术是实现这一功能的关键。在V…...

【讲解下AI Native应用中的模型微调】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…...

【SOC 芯片设计 DFT 学习专栏 -- DFT DRC规则检查】

请阅读【嵌入式及芯片开发学必备专栏】 请阅读【芯片设计 DFT 学习系列 】 如有侵权&#xff0c;请联系删除 转自&#xff1a; 芯爵ChipLord 2024年07月10日 12:00 浙江 文章目录 概述DRC的概念Tessent DRC检查的概述时钟相关检查扫描相关检查BIST规则检查预DFT时钟规则检查 …...

深度学习:如何计算感受野

感受野&#xff08;Receptive Field&#xff09;是卷积神经网络&#xff08;CNN&#xff09;中的一个重要概念&#xff0c;用于描述输入图像中的一个像素在输出特征图中影响的区域大小。在设计和理解卷积神经网络时&#xff0c;计算感受野有助于理解网络如何对输入数据进行处理…...

【状语从句】

框架 概念&#xff0c;特点主将从现连接词时间条件地点结果方式让步原因目的比较省略倒装 解读 1【概念&#xff0c;特点】 一个完整的句子&#xff0c;去修饰另一个完整句子中的动词&#xff0c;称为状语从句&#xff1b;特点&#xff1a;从句完整&#xff0c;只用考虑连接词是…...

阿里云服务器安装Anaconda后无法检测到

前言 问题如标题所言&#xff0c;就是conda -V验证错误&#xff0c;不过后来发现其实就是虽然安装时&#xff0c;同意了写入环境变量&#xff0c;但是其实还没有写入&#xff0c;需要手动写入。下面也会重复一遍安装流程。 安装 到[Anaconda下载处](Download Now | Anaconda)查…...

在没有源程序的情况时,如何通过控制鼠标按钮控制电脑exe程序?

有时候想控制第三方软件&#xff0c;但是没有源程序&#xff0c;可以控制鼠标键盘自动操作软件达到我们想要的目的 首先建一个功能类包含窗口控制&#xff0c;鼠标控制和输入控制等 csharp using System; using System.Collections.Generic; using System.Linq; using System.…...

如何排查GD32 MCU复位是由哪个复位源导致的?

上期为大家讲解了GD32 MCU复位包括电源复位和系统复位&#xff0c;其中系统复位还包括独立看门狗复位、内核软复位、窗口看门狗复位等&#xff0c;在一个GD32系统中&#xff0c;如果莫名其妙产生了MCU复位&#xff0c;如何排查具体是由哪个复位源导致的呢&#xff1f; GD32 MC…...

【C算法】编程初学者入门训练140道(1~20)

牛客编程初学者入门训练150题 BC1 实践出真知BC2 我是大VBC3 有容乃大BC6 小飞机BC7 缩短二进制BC8 十六进制转十进制BC9 printf的返回值BC10 成绩输入输出BC11 学生基本信息输入输出BC12 字符圣诞数BC13 ASCII 码BC14 出生日期输入输出BC15 按照格式输入并交换输出BC16 字符转…...

消息队列-rabbitmq(生产者.消费者. 消息.可靠性)

生产者者的可靠性 为了保证我们生产者在发送消息的时候消息不丢失&#xff0c;我们需要保证发送者的可靠性 1.生产者重试 假如发送消息的时候消息丢失 &#xff0c;我们可以使用发送者 重试机制&#xff0c;尝试重新发送消息 实现该机制非常简单&#xff0c;只需要在yml文…...

《InheriBT行为树》For Unity

InheriBT: Unity Editor中的行为树编辑框架 行为树&#xff08;Behavior Tree&#xff09;是一种广泛应用于人工智能&#xff08;AI&#xff09;领域的决策模型&#xff0c;特别是在游戏开发中。行为树通过分层结构和节点的组合&#xff0c;实现了复杂行为的简洁表达。然而&am…...

黑马头条Day11- 实时计算热点文章、KafkaStream

一、今日内容 1. 定时计算与实时计算 2. 今日内容 KafkaStream 什么是流式计算KafkaStream概述KafkaStream入门案例SpringBoot集成KafkaStream 实时计算 用户行为发送消息KafkaStream聚合处理消息更新文章行为数量替换热点文章数据 二、实时流式计算 1. 概念 一般流式计…...

pnpm 设置国内源

pnpm config set registry https://registry.npmmirror.com/...

链表分割 C语言

链表分割_牛客题霸_牛客网 (nowcoder.com) ( 点击前面链接即可查看题目) /* struct ListNode {int val;struct ListNode *next;ListNode(int x) : val(x), next(NULL) {} };*/ #include <cstddef> class Partition { public:ListNode* partition(ListNode* pHea…...

python编程,设计一个详细的软件 与SADS 相似

软件功能模块&#xff1a; 用户界面模块&#xff08;UI Module&#xff09; 项目管理界面模型构建界面分析和设计界面结果展示和报告生成界面 数据库模块&#xff08;Database Module&#xff09; 材料数据库结构组件数据库设计标准和规范数据库用户项目数据存储 模型构建模块&…...

META 备受期待的 Llama 3 405B 即将发布

本心、输入输出、结果 文章目录 META 备受期待的 Llama 3 405B 即将发布前言Llama 3 405B或许会彻底改变专用模型的数据质量Llama 3 405B将形成新的模型生态系统:从基础模型到专家组合Llama 3 405B有最高效 API 的竞争Llama 3 405B 基准测试META 备受期待的 Llama 3 405B 即将…...

c# Math.Round()四舍五入取整数

可以使用Math.Round()方法进行四舍五入取整数的操作。 以下是使用Math.Round()方法的实现方法&#xff1a; 将浮点数直接作为参数传递给Math.Round()方法&#xff0c;并指定要保留的小数位数。此方法将返回最接近的整数值。 double number 3.89; int roundedNumber (int)Mat…...

【C++BFS算法】886. 可能的二分法

本文涉及的点 CBFS算法 LeetCod886. 可能的二分法 给定一组 n 人&#xff08;编号为 1, 2, …, n&#xff09;&#xff0c; 我们想把每个人分进任意大小的两组。每个人都可能不喜欢其他人&#xff0c;那么他们不应该属于同一组。 给定整数 n 和数组 dislikes &#xff0c;其…...

【MySQL】记录MySQL加载数据(LOAD DATA)

MySQL LOAD DATA 一、背景二、模拟生成用户信息三、加载到mysql表3.1、建表语句3.2 加载数据3.3、查看结果 一、背景 现在有个需求是将用户信息存入student.data文件中&#xff0c;在现在load到数据库中 二、模拟生成用户信息 假设用户信息&#xff0c;包含姓名&#xff0c;…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...