前言
目前市面上有很多付費(fèi)的數(shù)據(jù)可視化平臺，作為一個代碼編程人員，為啥不自己搞一套呢，不僅自己可以增加自己的技能，也可以減少開發(fā)成本，何樂而不為呢？
寫這篇文章，一方面工作有需求要實現(xiàn)數(shù)據(jù)可視化大屏，另一方面當(dāng)然現(xiàn)在也有很多場景都用到數(shù)據(jù)可視化大屏，如報告總結(jié)、數(shù)據(jù)跟蹤等等，在此總結(jié)分享給大家，寫的不好的地方歡迎指出批評，謝謝。

什么是數(shù)據(jù)可視化的大屏

眾所周知， 未來的數(shù)據(jù)可視化趨勢已成為了必然性，越來越多的企業(yè)、政府等的應(yīng)用場景應(yīng)用都會普及 ，銷售、教育、醫(yī)療、貿(mào)易等行業(yè)領(lǐng)域也涉及廣泛 ，根據(jù)實時的監(jiān)控數(shù)據(jù)，把最新的數(shù)據(jù)展現(xiàn)在大屏幕上，清楚地看到自己想要看到的數(shù)據(jù)，同時根據(jù)這些數(shù)據(jù)做出決策的調(diào)整。

數(shù)據(jù)可視化是指通過圖表、圖形、地圖等視覺要素來表現(xiàn)數(shù)據(jù)中包含的信息的傾向、異常和模式。簡而言之，數(shù)據(jù)可視化是用圖形表達(dá)數(shù)據(jù)和信息。

數(shù)據(jù)可視化大屏幕的優(yōu)點

1、全面認(rèn)識數(shù)據(jù)，是數(shù)據(jù)更直觀清晰
2、支持自由布局
3、低代碼開發(fā)，輕松搭建

在這我用了vue + v-scale-screen組件 + dataV組件來開發(fā)這個功能，也可以用react + r-scale-screen + dataV組件來實現(xiàn)，v-scale-screen和r-scale-screen是大屏自適應(yīng)容器組件，分別基于VUE框架的和react框架的，如果沒有那么多復(fù)雜的場景可不考慮使用此組件。

v-scale-screen：
大屏自適應(yīng)容器組件，可用于大屏項目開發(fā)，實現(xiàn)屏幕自適應(yīng)，可根據(jù)寬度自適應(yīng)，高度自適應(yīng)，和寬高等比例自適應(yīng)，全屏自適應(yīng)（會存在拉伸問題），使用時候請根據(jù)VUE的版本安裝對應(yīng)的版本，詳請閱讀v-scale-screen文檔。

dataV：
大屏可視化組件，具有多種類型的組件可供使用。推薦使用谷歌瀏覽器，其他瀏覽器有兼容問題。
使用時注意寬高異常和狀態(tài)更新的問題。詳情請閱讀dataV文檔。

寬高異常
組件的默認(rèn)寬高都是100%，可以根據(jù)父容器寬高進(jìn)行自適應(yīng)，但在某些情況下組件寬高可能表現(xiàn)異常，這種情況一般是因為組件的父容器寬高發(fā)生了變化，而組件沒有偵知這一變化，你可以在組件上綁定key值，在更改父容器寬高且頁面完成重繪后（使用$nextTick），更新key值，使組件強(qiáng)制刷新，以獲取正確寬高。

狀態(tài)更新
避免你的組件更新了數(shù)據(jù)后，狀態(tài)卻不刷新，也就是沒變化，請務(wù)必看這里
組件props均未設(shè)置deep監(jiān)聽，刷新props時，請直接生成新的props對象（基礎(chǔ)數(shù)據(jù)類型除外），或完成賦值操作后使用ES6拓展運(yùn)算符生成新的props對象（this.someProps = { …this.someProps }）。

首先你得有一個VUE的環(huán)境，這里就不過多介紹和安裝VUE環(huán)境了，直接跳過這一步，然后安裝v-scale-screen大屏自適應(yīng)容器組件。

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

在 vue2 中我們使用插件方式導(dǎo)出，故而需要 Vue.use() 進(jìn)行注冊

// 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 樣式設(shè)置為 overflow: hidden; 注：使用時請將 body 樣式設(shè)置為 overflow: hidden; 注：使用時請將 body 樣式設(shè)置為 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不也可以全屏展示自動進(jìn)行縮放處理嗎。這里要解釋一波，一個原因是v-scale-screen的自適應(yīng)的效果比較好，還有就是dataV的局限性。dataV建議在全屏容器內(nèi)使用百分比搭配flex進(jìn)行布局，以便于在不同的分辨率下得到較為一致的展示效果。使用前請注意將body的margin設(shè)為0，否則會引起計算誤差，全屏后不能完全充滿屏幕。但是用vue + v-scale-screen包裹一下就不會出現(xiàn)這種問題。這里不推薦使用dataV的全屏容器

總體的代碼片段文章來源地址http://www.zghlxwxcb.cn/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>

到了這里，關(guān)于前端實現(xiàn)自適應(yīng)屏幕數(shù)據(jù)可視化大屏（vue + v-scale-screen組件 + dataV組件）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！