前端实现自适应屏幕数据可视化大屏（vue + v-scale-screen组件 + dataV组件）-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端实现自适应屏幕数据可视化大屏（vue + v-scale-screen组件 + dataV组件）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言
目前市面上有很多付费的数据可视化平台，作为一个代码编程人员，为啥不自己搞一套呢，不仅自己可以增加自己的技能，也可以减少开发成本，何乐而不为呢？
写这篇文章，一方面工作有需求要实现数据可视化大屏，另一方面当然现在也有很多场景都用到数据可视化大屏，如报告总结、数据跟踪等等，在此总结分享给大家，写的不好的地方欢迎指出批评，谢谢。

什么是数据可视化的大屏

众所周知，未来的数据可视化趋势已成为了必然性，越来越多的企业、政府等的应用场景应用都会普及，销售、教育、医疗、贸易等行业领域也涉及广泛，根据实时的监控数据，把最新的数据展现在大屏幕上，清楚地看到自己想要看到的数据，同时根据这些数据做出决策的调整。

数据可视化是指通过图表、图形、地图等视觉要素来表现数据中包含的信息的倾向、异常和模式。简而言之，数据可视化是用图形表达数据和信息。

数据可视化大屏幕的优点

1、全面认识数据，是数据更直观清晰
2、支持自由布局
3、低代码开发，轻松搭建

在这我用了vue + v-scale-screen组件 + dataV组件来开发这个功能，也可以用react + r-scale-screen + dataV组件来实现，v-scale-screen和r-scale-screen是大屏自适应容器组件，分别基于VUE框架的和react框架的，如果没有那么多复杂的场景可不考虑使用此组件。

v-scale-screen：
大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题），使用时候请根据VUE的版本安装对应的版本，详请阅读v-scale-screen文档。

dataV：
大屏可视化组件，具有多种类型的组件可供使用。推荐使用谷歌浏览器，其他浏览器有兼容问题。
使用时注意宽高异常和状态更新的问题。详情请阅读dataV文档。

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

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

首先你得有一个VUE的环境，这里就不过多介绍和安装VUE环境了，直接跳过这一步，然后安装v-scale-screen大屏自适应容器组件。

npm install v-scale-screen 或 yarn add v-scale-screen

在 vue2 中我们使用插件方式导出，故而需要 Vue.use() 进行注册

// main.js
import Vue from 'vue'
import VScaleScreen from 'v-scale-screen'

Vue.use(VScaleScreen)

<template>
  <v-scale-screen width="1920" height="1080">
    <div>
      你想添加的模块
    </div>
  </v-scale-screen>
</template>

Vue3 or Vue2.7 版本

<template>
  <v-scale-screen width="1920" height="1080">
    <div>
      你想添加的模块
    </div>
  </v-scale-screen>
</template>

<script>
import { defineComponent } from 'vue'
import VScaleScreen from 'v-scale-screen'

export default defineComponent({
  name: 'Demo',
  components: {
    VScaleScreen
  }
})
</script>

注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden; 注：使用时请将 body 样式设置为 overflow: hidden;这里的width和height分别是大屏的宽度和高度

然后我们安装一下dataV组件

npm install @jiaminghi/data-view 或 yarn add @jiaminghi/data-view

使用

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

按需引入

import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

有的朋友就会问了，为啥安装了dataV组件还要安装v-scale-screen组件呢？dataV不也可以全屏展示自动进行缩放处理吗。这里要解释一波，一个原因是v-scale-screen的自适应的效果比较好，还有就是dataV的局限性。dataV建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。使用前请注意将body的margin设为0，否则会引起计算误差，全屏后不能完全充满屏幕。但是用vue + v-scale-screen包裹一下就不会出现这种问题。这里不推荐使用dataV的全屏容器

总体的代码片段文章来源地址https://www.toymoban.com/news/detail-713592.html

  <v-scale-screen width="1920" height="1080">
    <div>
      <dv-border-box-1 :color="['red', 'green']" backgroundColor="blue" >dv-border-box-1</dv-border-box-1>
      <dv-decoration-1 :color="['red', 'green']" />
      你想添加的dataV展示组件。。。
    </div>
  </v-scale-screen>