大屏可视化屏幕适配的几种方法(可视化大屏应用场景)
公司要开发数据可视化大屏，研究了几天资料，把自己的研究成果发出来，希望能够帮到大家（内容较长）。
方法一：利用css的transform属性以及设计百分比以及scal（）方法：
第一步：先写一个组件，width = 100vw,height = 100%,作为大屏展示的背景
<template> <div> <div :style="style"> <slot /> </div> </div> </template> <style> .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: url("../../assets/charts/icon-bg.png") no-repeat; background-size: 100% 100%; } </style> 复制代码第二步：.根据设计同学提供的设计图可以计算出每部分区域的百分比，例如总尺寸是w*h，其中一个图标宽高是w1 * h1，实现常规切图，此时由1-->2可得：
<template> <div> <div :style="style"> <slot /> </div> </div> </template> <script> export default { name: 'ScreenAdapter', data() { return { style: { width: `${this.w}px`, height: `${this.h}px`, transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中 }, }; }, props: { w: { // 设计图尺寸宽 type: Number, default: 1600, }, h: { // 设计图尺寸高 type: Number, default: 1200, }, }, }; </script> <style> .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: url("../../assets/charts/icon-bg.png") no-repeat; background-size: 100% 100%; .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; padding: 18px 64px; } } </style> 复制代码第三步：基于第二步，需要根据大屏具体尺寸计算缩放比例，以及设置缩放比例，需要注意的是，绑定resize事件一定别忘了防抖，页面销毁别忘了移除监听事件：
<template> <div> <div :style="style"> <slot /> </div> </div> </template> <script> export default { name: 'ScreenAdapter', data() { return { style: { width: `${this.w}px`, height: `${this.h}px`, transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中 }, }; }, props: { w: { // 设计图尺寸宽 type: Number, default: 1600, }, h: { // 设计图尺寸高 type: Number, default: 1200, }, }, mounted() { this.setScale(); this.onresize = this.debounce(() => this.setScale(), 100); window.addEventListener('resize', this.onresize); }, methods: { // 防抖 debounce(fn, t) { const delay = t || 500; let timer; // eslint-disable-next-line func-names return function () { // eslint-disable-next-line prefer-rest-params const args = arguments; if (timer) { clearTimeout(timer); } const context = this; timer = setTimeout(() => { timer = null; fn.apply(context, args); }, delay); }; }, // 获取缩放比例 getScale() { console.log(window.innerHeight, window.innerWidth); const w = window.innerWidth / this.w; const h = window.innerHeight / this.h; return w < h ? w : h; }, // 设置缩放比例 setScale() { this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`; }, }, beforeDestroy() { window.removeEventListener('resize', this.onresize); }, }; </script> <style> .screen-adapter { width: 100vw; min-height: 100%; max-height: 100vh; overflow: hidden; background: url("../../assets/charts/icon-bg.png") no-repeat; background-size: 100% 100%; .content-wrap { transform-origin: 0 0; position: absolute; top: 50%; left: 50%; padding: 18px 64px; } } </style> 复制代码第四步：到这大部分已经完成，只要往插槽放组件就行了
data文件夹下各个.vue的解释： chart.vue是数据可视化页面； ScreenAdapter.vue是页面自适应组件； Card.vue是每个图表的外框； 其他的都是每一个图表
Chart.vue页面如下：
页面适配效果如下
2000*1500
1600*1200
方法二：大屏vw和vh适配方案：
常见的屏幕分辨率
1280 * 720： 老式电脑的屏幕，目前很少见到
1366 * 768 ： 普通液晶显示器
1920 * 1080： 高清液晶显示器
2560 * 1440： 2K高清显示器
3840 * 2160： 4K高清显示器
自适应的难点
要兼容不同屏幕尺寸的分辨率让页面在不同分辨率的屏幕下都保持正常的显示效果和比例
不同分辨率，显示场景不同，不能固定写死px单位
一些图表的自适应方式需要特别处理
关于vw和vh
屏幕视口宽度 = 100vw
屏幕视口高度 = 100vh
vw和vh也是css中标准的单位，和px,rem, %一样
vw和vh适配方案
按照设计稿的尺寸，将
px按比例计算转为vw和vh转换公式如下
` 假设设计稿尺寸为1920*1080（做之前一定问清楚UI设计稿的尺寸）
即： 网页宽度=1920px 网页高度=1080px 我们都知道 网页宽度=100vw 网页宽度=100vh 所以，在1920x*1080px的屏幕分辨率下 1920px = 100vw 1080px = 100vh 这样一来，以一个宽300px和200px的div来说，其作所占的宽高，以vw和vh为单位，计算方式如下: vwDiv = (300px / 1920px ) * 100vw vhDiv = (200px / 1080px ) * 100vh 所以，就在1920*1080的屏幕分辨率下，计算出了单个div的宽高 当屏幕放大或者缩小时，div还是以vw和vh作为宽高的，就会自动适应不同分辨率的屏幕 复制代码
` 但是每次都手动计算时不现实的，所以，我需要封装一个处理函数，让它帮我自动计算
这里我用到了scss
在
src/styles下新建一个utils.scss文件，定义好设计稿的宽度和高度两个变量在这里使用scss内置的
math.div函数，定义两个vw和vh的计算函数我们传入具体的像素值，其帮我们自动计算出vw和vh的值
utils.scss
我们的大屏的宽高比为4:3； `
//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div @use "sass:math"; //默认设计稿的宽度 $designWidth:1600; //默认设计稿的高度 $designHeight:1200; //px转为vw的函数 @function vw($px) { @return math.div($px , $designWidth) * 100vw; } //px转为vh的函数 @function vh($px) { @return math.div($px , $designHeight) * 100vh; } 复制代码`
使用方式 依赖项
使用前安装对应版本的node包
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
路径配置
我这里使用的是vue2.6和vue-cli3搭建的vue项目，所以，我只需要在vue.config.js里配置一下utils.scss的路径,就可以全局使用了
vue.config.js（只展示了与本方法有关的配置）
`
const path = require('path'); const StyleLintPlugin = require('stylelint-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); const defaultSettings = require('./src/settings.js'); function resolve(dir) { return path.join(__dirname, dir); } const name = defaultSettings.title; // page title const port = process.env.port || process.env.npm_config_port || 8066; // dev port const devUrl = process.env.DEV_URL; // dev url module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'static', lintOnSave: process.env.NODE_ENV === 'development', productionSourceMap: false, devServer: { port, open: true, overlay: { warnings: false, errors: true, }, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: devUrl, changeOrigin: true, ws: false, }, }, }, configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name, resolve: { alias: { '@': resolve('src'), }, }, performance: { maxEntrypointSize: 400000, maxAssetSize: 250000, }, }, css: { loaderOptions: { //全局配置utils.scss,详细配置参考vue-cli官网 sass: { prependData: '@import "@/styles/utils.scss";', }, less: { javascriptEnabled: true, }, }, }, }; 复制代码` 在.vue文件中使用
`
<script> export default{ name: "Box", } </script> <style scoped="scoped"> /* 直接使用vw和vh函数，将像素值传进去，得到的就是具体的vw vh单位*/ .chart-wrapper{ width: vw(400); height: vh(300); font-size: vh(16); background-color: black; margin: vw(20); border: vh(2) solid red; } </style> 复制代码`
特殊的使用情况
有的时候可能不仅在.vue文件中使用，比如在js中动态创建的DOM元素
它可能是直接渲染到html里面的
let oDiv = document.createElement('div') document.body.appendChild(oDiv) 复制代码这样的话，我用了以下两种处理方式,来给创建的div设置样式
1. 定义一些全局的class
新建一个global.scss文件，在main.js中引入
global.scss
.global-div{ width: vw(300); height: vw(200); background-color: green; } 复制代码main.js
import './styles/global.scss' 复制代码
使用时，给创建的div设置className,
let oDiv = document.createElement('div') oDiv.className = "global-div" 复制代码2. 定义js样式处理函数
这种处理方式和scss处理函数类似，只不过使用了纯js将px转为vw和vh
新建一个styleUtil.js文件，内容如下
//定义设计稿的宽高 const designWidth = 1920; const designHeight = 1080; let styleUtil = { // px转vw px2vw: function (_px) { return _px * 100.0 / designWidth + 'vw'; }, // px转vh px2vh: function (_px) { return _px * 100.0 / designHeight + 'vh'; }, }; export default styleUtil; 复制代码使用时，单独设置宽高等属性
import styleUtil from "./src/utils/styleUtil.js" let oDiv = document.createElement('div') oDiv.style.width = styleUtil.px2vw(300) oDiv.style.height = styleUtil.px2vh(200) oDiv.style.margin = styleUtil.px2vh(20) 复制代码不过这种使用方式有种弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整
作者：hollyhuang
链接：https://juejin.cn/post/7028853751423189022