当前位置: 首页 > 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;…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

Vue3 PC端 UI组件库我更推荐Naive UI

一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用&#xff0c;前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率&#xff0c;还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库&#xff08;Naive UI、Element …...

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展&#xff0c;企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心&#xff0c;成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统&#xff0c;它不仅支持跨平台应用&#xff0c;还能提供丰富…...

初探用uniapp写微信小程序遇到的问题及解决(vue3+ts)

零、关于开发思路 (一)拿到工作任务,先理清楚需求 1.逻辑部分 不放过原型里说的每一句话,有疑惑的部分该问产品/测试/之前的开发就问 2.页面部分(含国际化) 整体看过需要开发页面的原型后,分类一下哪些组件/样式可以复用,直接提取出来使用 (时间充分的前提下,不…...