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

vue大屏展示组件库datav

news 文章来源：https://blog.csdn.net/m0_46613429/article/details/140654564 2025/4/20 12:24:05

主要用于构建大屏数据展示页面，具有多种类型组件可供使用。详情参考 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