vue 数据看板大屏适配方案

1.在public文件夹中新建一个flexs.js文件

//flexs.js
(function(win) {var bodyStyle = document.createElement('style');// 这里根据具体的设计稿尺寸来定bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`;document.documentElement.firstElementChild.appendChild(bodyStyle);function refreshScale() {let docWidth = document.documentElement.clientWidth;let docHeight = document.documentElement.clientHeight;var designWidth = 1920,  // 这里根据具体的设计稿尺寸来定designHeight = 1080,  // 这里根据具体的设计稿尺寸来定widthRatio = docWidth / designWidth,heightRatio = docHeight / designHeight;document.body.style = `transform:scale(${widthRatio});transform-origin:left top;overflow: hidden;`;// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况setTimeout(function() {var lateWidth = document.documentElement.clientWidth,lateHeight = document.documentElement.clientHeight;if (lateWidth === docWidth) return;widthRatio = lateWidth / designWidth;heightRatio = lateHeight / designHeight;document.body.style = 'transform:scale(' + widthRatio  + ');transform-origin:left top;overflow: hidden;';}, 0);}refreshScale();win.addEventListener('pageshow',function(e) {if (e.persisted) {// 浏览器后退的时候重新计算refreshScale();}},false);win.addEventListener('resize', refreshScale, false);
})(window);

2.在index.html文件中引入文件

<!-- 引入flexs.js  --><script type="text/javascript" src="<%= BASE_URL %>flexs.js"></script>

vue 数据看板大屏适配方案相关推荐

Vue 可视化大屏适配方案
最近在做可视化大屏的适配,要求大屏页面能够在大屏和电脑自适应,查阅了一些资料,大体上有 3 种方案: 1.使用 transform 2.将 px 转化为 rem 3.使用 zoom 查看当前浏览器尺寸 ...
Vue 大屏适配方案2 锁定宽高比
创建一个外层包裹容器,,用该容器包裹所有的router-view,根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例,根据比例去对外层包裹容器进行缩放,以适应屏幕包裹容器完整代码: <tem ...
一次搞懂数据大屏适配方案 (vw vh、rem、scale)
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言当接到可视化大屏需求时,你是否会有以下疑问
用excel/WPS制作酷炫数据可视化大屏（附模板）
大家好,随着数据分析越来越火热,有越来越漂亮的数据分析报表得到了大家的关注.如何制作漂亮的数据大屏看板,成为许多数据分析师的必学课程. 一.思路优先做数据分析大屏的关键,是整个分析逻辑,在整个分析中 ...
爆肝十小时，为你总结出最全的数据大屏适配屏幕方案
前言近期公司投放在展厅大屏中演示的大数据页面,出现了文字.图表.表格等多类组件显示错乱的情况,大部分原因还是适配问题. 我们做数据大屏时,因为显示器尺寸不同,会导致展示的时候有留白区域,效果不好,所 ...
Vue 前端数据大屏适配
逻辑分析: 采用了css3的缩放transform: scale(X)属性,我们不难发现本人改变分辨率时,scale的值是变化的.前端小伙们们看到这,想必也已经明白了大概. 我们只要监听浏览器窗口大的 ...
vue怎么给pc端浏览器设置一个最小屏幕_图文讲解uni-app的PC宽屏适配方案
天下苦平台碎片化已久. 在移动互联网以前,开发者只需幸福的面对web.进入移动互联网时代,iOS.Android.H5以及各种小程序快应用层出不穷,开发者再也幸福不起来. 学习n个技术开发n个版本 ...
Qt编写数据可视化大屏界面电子看板1-布局方案
一.前言布局方案在整个数据可视化大屏界面电子看板系统中,是除了基础功能以外的核心功能之一,只有具备了布局方案这个功能,才能让用户随意调整自己想要的布局,保存成自定义名称的布局配置文件,这样就大大增加 ...
基于vue+echarts 数据可视化大屏展示[附源码]
获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您 ...
【15】数据可视化：基于 Echarts + Vue 实现的大屏范例 - 世界人口统计大屏
系列文章 https://blog.csdn.net/lildkdkdkjf/article/details/120705616 文末有免费福利,喜欢的小伙伴们一键三连支持下,关注收藏点赞~ 目录 ...

vue 数据看板大屏适配方案

vue 数据看板大屏适配方案相关推荐

最新文章

热门文章