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
主要用于构建大屏数据展示页面,具有多种类型组件可供使用。详情参考 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(vue-resource)的集成应用 Vue.js 是一款流行的前端JavaScript框架,以其简洁、灵活和高效的特点而受到开发者的喜爱。在实际开发中,与后端服务的通信是不可或缺的,而Ajax技术是实现这一功能的关键。在V…...
【讲解下AI Native应用中的模型微调】
🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…...
【SOC 芯片设计 DFT 学习专栏 -- DFT DRC规则检查】
请阅读【嵌入式及芯片开发学必备专栏】 请阅读【芯片设计 DFT 学习系列 】 如有侵权,请联系删除 转自: 芯爵ChipLord 2024年07月10日 12:00 浙江 文章目录 概述DRC的概念Tessent DRC检查的概述时钟相关检查扫描相关检查BIST规则检查预DFT时钟规则检查 …...
深度学习:如何计算感受野
感受野(Receptive Field)是卷积神经网络(CNN)中的一个重要概念,用于描述输入图像中的一个像素在输出特征图中影响的区域大小。在设计和理解卷积神经网络时,计算感受野有助于理解网络如何对输入数据进行处理…...
【状语从句】
框架 概念,特点主将从现连接词时间条件地点结果方式让步原因目的比较省略倒装 解读 1【概念,特点】 一个完整的句子,去修饰另一个完整句子中的动词,称为状语从句;特点:从句完整,只用考虑连接词是…...
阿里云服务器安装Anaconda后无法检测到
前言 问题如标题所言,就是conda -V验证错误,不过后来发现其实就是虽然安装时,同意了写入环境变量,但是其实还没有写入,需要手动写入。下面也会重复一遍安装流程。 安装 到[Anaconda下载处](Download Now | Anaconda)查…...
在没有源程序的情况时,如何通过控制鼠标按钮控制电脑exe程序?
有时候想控制第三方软件,但是没有源程序,可以控制鼠标键盘自动操作软件达到我们想要的目的 首先建一个功能类包含窗口控制,鼠标控制和输入控制等 csharp using System; using System.Collections.Generic; using System.Linq; using System.…...
如何排查GD32 MCU复位是由哪个复位源导致的?
上期为大家讲解了GD32 MCU复位包括电源复位和系统复位,其中系统复位还包括独立看门狗复位、内核软复位、窗口看门狗复位等,在一个GD32系统中,如果莫名其妙产生了MCU复位,如何排查具体是由哪个复位源导致的呢? GD32 MC…...
【C算法】编程初学者入门训练140道(1~20)
牛客编程初学者入门训练150题 BC1 实践出真知BC2 我是大VBC3 有容乃大BC6 小飞机BC7 缩短二进制BC8 十六进制转十进制BC9 printf的返回值BC10 成绩输入输出BC11 学生基本信息输入输出BC12 字符圣诞数BC13 ASCII 码BC14 出生日期输入输出BC15 按照格式输入并交换输出BC16 字符转…...
消息队列-rabbitmq(生产者.消费者. 消息.可靠性)
生产者者的可靠性 为了保证我们生产者在发送消息的时候消息不丢失,我们需要保证发送者的可靠性 1.生产者重试 假如发送消息的时候消息丢失 ,我们可以使用发送者 重试机制,尝试重新发送消息 实现该机制非常简单,只需要在yml文…...
《InheriBT行为树》For Unity
InheriBT: Unity Editor中的行为树编辑框架 行为树(Behavior Tree)是一种广泛应用于人工智能(AI)领域的决策模型,特别是在游戏开发中。行为树通过分层结构和节点的组合,实现了复杂行为的简洁表达。然而&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 相似
软件功能模块: 用户界面模块(UI Module) 项目管理界面模型构建界面分析和设计界面结果展示和报告生成界面 数据库模块(Database Module) 材料数据库结构组件数据库设计标准和规范数据库用户项目数据存储 模型构建模块&…...
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()方法的实现方法: 将浮点数直接作为参数传递给Math.Round()方法,并指定要保留的小数位数。此方法将返回最接近的整数值。 double number 3.89; int roundedNumber (int)Mat…...
【C++BFS算法】886. 可能的二分法
本文涉及的点 CBFS算法 LeetCod886. 可能的二分法 给定一组 n 人(编号为 1, 2, …, n), 我们想把每个人分进任意大小的两组。每个人都可能不喜欢其他人,那么他们不应该属于同一组。 给定整数 n 和数组 dislikes ,其…...
【MySQL】记录MySQL加载数据(LOAD DATA)
MySQL LOAD DATA 一、背景二、模拟生成用户信息三、加载到mysql表3.1、建表语句3.2 加载数据3.3、查看结果 一、背景 现在有个需求是将用户信息存入student.data文件中,在现在load到数据库中 二、模拟生成用户信息 假设用户信息,包含姓名,…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术,可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势,还能有效评价重大生态工程…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...
实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
