前端实现自适应屏幕数据可视化大屏(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 { define***ponent } from 'vue'
import VScaleScreen from 'v-scale-screen'

export default define***ponent({
  name: 'Demo',
  ***ponents: {
    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的全屏容器

总体的代码片段

  <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>
转载请说明出处内容投诉
CSS教程_站长资源网 » 前端实现自适应屏幕数据可视化大屏(vue + v-scale-screen组件 + dataV组件)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买