vue大屏可视化自适应完美方案
背景
在做大屏可视化项目的时候，一般设计稿会设计成1920*1080，但是页面写死1920*1080在2k、4k等分辨率的屏幕下是不适配的。如果页面能够根据屏幕比例进行等比缩放那就好了。
比例
什么？不知道屏幕比例？其实我们常见的1920*1080（1080P）、2k、4k...都是16：9的比例，在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕下展示，确定了实际屏幕比例，按照实际屏幕比例选择一个设计稿尺寸进行设计，设计稿出来后前端严格按照设计稿px进行开发页面即可（前提是按照下列适应方案进行开发）下列适应方案能够适应同比例下的所有分辨率屏幕。
方案
提到等比缩放，第一反应就是css3的缩放属性；其实“阿里DataV”与“腾讯云图”两个大厂的数据可视化项目对大屏数据可视化的适应方案均采用css3的transform：scale进行等比缩放实现的，这种方案目前也被很多人在使用，个人在实际项目中也采用的这种方案。
实际应用
使用 roc-scale-box 组件，vue2与vue3都支持，使用非常简单，引入之后组件内所有内容都会按照设置的宽高比例进行缩放，还有屏幕缩放防抖优化
vue2版本（npm官网）：https://www.npmjs.com/package/vue2-scale-box
vue3版本（npm官网）：https://www.npmjs.com/package/vue3-scale-box
也适用于项目开发完成后发现需要做适配，引入组件包裹项目根节点即可。
属性：
width宽度 默认1920height高度 默认1080bgc背景颜色 默认"transparent"delay自适应缩放防抖延迟时间（ms） 默认100@scaleChange缩放值发生改变的方法 可动态获取 scale 改变后的值
vue大屏可视化自适应完美方案相关推荐
- 【前端大屏可视化项目适配方案】
引自 https://juejin.cn/post/7009081081760579591#heading-27 感谢!!! 前端大屏可视化项目适配方案 1. 全局适配 1.1 css scale 适 ...
- gis 大屏_gis大屏可视化应用技术方案_gis大屏可视化应用技术_gis大屏可视化应用 - 帆软...
如今大屏可视化的应用越来越普遍,在很多公共场合.交易大厅,以及企业的展览中心,大屏可视化都是非常震撼的.那么gis大屏可视化应用技术方案哪家公司靠谱?你需要掌握这2招选择标准. 一.gis大屏可视化应 ...
- 用Vue大屏可视化，数据可视化平台酷屏优胜它
大屏可视化,老司机提到vue大家肯定不陌生,什么是Vue呢?Vue 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心 ...
- Vue大屏可视化DataV组件库
前言 最近需要做一个 Vue大屏数据可视化的项目,找资料的时候发现一个很棒的 vue大屏数据可视化插件DataV组件库,可使我们大屏看起来更高端. DataV介绍 网站链接:http://datav. ...
- VUE大屏可视化实战
前言 框架:若依 VUE+SpringBoot前后端分离 基于此框架开发一个可视化自适应大屏(包括echarts和element的各种组件) 1.布局 通过div将大的布局框出来,div一定要由大到小 ...
- vue大屏可视化布局
html {/* 将屏幕整个宽度设置为24rem,从而自动实现内容按照屏幕的大小进行缩放 *//* 屏幕大小比例 16:9 */font-size: calc(100vw / 24); } body ...
- 大屏可视化的适配方案
这里找了几个写的非常不错的文章,分享一下: https://blog.csdn.net/qq_41238459/article/details/122812296?ops_request_misc=& ...
- 可视化大屏设计尺寸_Vue 大屏可视化-屏幕自适应(保持设计尺寸比例)
最近在用VUE写大屏页面,遇到屏幕自适应问题,根据设计的尺寸,在各种屏幕尺寸下自适应,保持显示比例不变,经过几天摸索,终于达到了效果,希望为还在这问题困扰的提供点帮助 铺满全屏效果见Vue 大屏可视化 ...
- Vue项目大屏可视化适配 transform+解决高德地图经纬度偏移
这几天在做大屏项目的屏幕适配. 看到别人提到过使用flexible.js可以完成大屏的适配.我也尝试了一下,但是并没有成功. 参考了一下别人的项目的适配. 简单描述一下这个适配大屏代码的思路,主要通过 ...
最新文章
- 会话管理-2.1.Session介绍
- Little Sub and Applese
- LightOJ - 1027 数学期望
- Git 学习看这篇就够了！
- scale 和 transform-origin 实现线条从左侧进入，右侧离开效果
- DIV布局的设置（水平或者垂直居中）
- Eclipse使用Maven插件创建Web项目时出错：Could not resolve archetype org.apache.maven.archetypes
- 红橙Darren视频笔记 仿酷狗侧滑效果
- 在制作只有一页的WORD小报时再添加一页
- 算法-罗马数字转成整数（leetcode13）
- 什么是实时渲染，吃CPU还是显卡？
- 腾讯校招java面经_腾讯校招技术岗面试经历及总结（笔试-一面-二面-终面均通过）...
- C++ 调用Asprise OCR识别图片中的文字
- Unity随记(一) LookAt和LookRotation的使用
- mysql查询表里面重复的数据_mysql查询表里的重复数据方法
- 使用puppeteer启动并最大化显示Chrome浏览器
- 定时器Timer（一）—— 定时器Timer的使用
- phpExcel 正确读取excel表格时间
- 微星B360傲腾内存设置方法
- 计蒜客第七章：互粉攻略