代码上传

source/_posts/前端实现自适应屏幕数据可视化大屏（vue + v-scale-screen组件 + dataV组件）.md

+***前言***
+目前市面上有很多付费的数据可视化平台，作为一个代码编程人员，为啥不自己搞一套呢，不仅自己可以增加自己的技能，也可以减少开发成本，何乐而不为呢？
+写这篇文章，一方面工作有需求要实现数据可视化大屏，另一方面当然现在也有很多场景都用到数据可视化大屏，如报告总结、数据跟踪等等，在此总结分享给大家，写的不好的地方欢迎指出批评，谢谢。
+
+## 什么是数据可视化的大屏
+众所周知， 未来的数据可视化趋势已成为了必然性，越来越多的企业、政府等的应用场景应用都会普及 ，销售、教育、医疗、贸易等行业领域也涉及广泛 ，根据实时的监控数据，把最新的数据展现在大屏幕上，清楚地看到自己想要看到的数据，同时根据这些数据做出决策的调整。
+
+数据可视化是指通过图表、图形、地图等视觉要素来表现数据中包含的信息的倾向、异常和模式。简而言之，数据可视化是用图形表达数据和信息。
+
+## 数据可视化大屏幕的优点
+	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文档](https://github.com/Alfred-Skyblue/v-scale-screen)。
+
+**dataV**：
+大屏可视化组件，具有多种类型的组件可供使用。推荐使用谷歌浏览器，其他浏览器有兼容问题。
+使用时注意宽高异常和状态更新的问题。详情请阅读[dataV文档](http://datav.jiaminghi.com/)。
+
+*宽高异常*
+组件的默认宽高都是100%，可以根据父容器宽高进行自适应，但在某些情况下组件宽高可能表现异常，这种情况一般是因为组件的父容器宽高发生了变化，而组件没有侦知这一变化，你可以在组件上绑定key值，在更改父容器宽高且页面完成重绘后（使用$nextTick），更新key值，使组件强制刷新，以获取正确宽高。
+
+*状态更新*
+避免你的组件更新了数据后，状态却不刷新，也就是没变化，请务必看这里
+组件props均未设置deep监听，刷新props时，请直接生成新的props对象（基础数据类型除外），或完成赋值操作后使用ES6拓展运算符生成新的props对象（this.someProps = { ...this.someProps }）。
+
+首先你得有一个VUE的环境，这里就不过多介绍和安装VUE环境了，直接跳过这一步，然后安装v-scale-screen大屏自适应容器组件。
+```typescript
+npm install v-scale-screen 或 yarn add v-scale-screen
+```
+
+在 vue2 中我们使用插件方式导出，故而需要 Vue.use() 进行注册
+
+```typescript
+// main.js
+import Vue from 'vue'
+import VScaleScreen from 'v-scale-screen'
+
+Vue.use(VScaleScreen)
+```
+
+```typescript
+<template>
+  <v-scale-screen width="1920" height="1080">
+    <div>
+      你想添加的模块
+    </div>
+  </v-scale-screen>
+</template>
+```
+Vue3 or Vue2.7 版本
+
+```typescript
+<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组件
+
+```typescript
+npm install @jiaminghi/data-view 或 yarn add @jiaminghi/data-view
+```
+使用
+
+```typescript
+// 将自动注册所有组件为全局组件
+import dataV from '@jiaminghi/data-view'
+
+Vue.use(dataV)
+```
+按需引入
+
+```typescript
+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的全屏容器***
+
+总体的代码片段
+
+```typescript
+  <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>
+```
+