大屏可视化屏幕适配的几种方法

20,179

公司要开发数据可视化大屏,研究了几天资料,把自己的研究成果发出来,希望能够帮到大家(内容较长)。

方法一:利用css的transform属性以及设计百分比以及scal()方法:

第一步:先写一个组件,width = 100vw,height = 100%,作为大屏展示的背景

<template>
  <div class="screen-adapter">
    <div class="content-wrap" :style="style">
      <slot />
    </div>
  </div>
</template>

<style lang="scss">
.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 class="screen-adapter">
    <div class="content-wrap" :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 lang="scss">
.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 class="screen-adapter">
    <div class="content-wrap" :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 lang="scss">
.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>

第四步:到这大部分已经完成,只要往插槽放组件就行了

企业微信截图_16357563933770.png data文件夹下各个.vue的解释: chart.vue是数据可视化页面; ScreenAdapter.vue是页面自适应组件; Card.vue是每个图表的外框; 其他的都是每一个图表

Chart.vue页面如下:

企业微信截图_16357566257336.png

页面适配效果如下

2000*1500

企业微信截图_16357568614800.png

1600*1200

企业微信截图_16357574935654.png

方法二:大屏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按比例计算转为vwvh

  • 转换公式如下 ` 假设设计稿尺寸为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函数,定义两个vwvh的计算函数
  • 我们传入具体的像素值,其帮我们自动计算出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 lang="scss" 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)

不过这种使用方式有种弊端,就是屏幕尺寸发生变化后,需要手动刷新一下才能完成自适应调整

该方法参考地址

方法三:可以使用DataV

DataV具体使用方法可以参考

大家在使用过程中可以根据项目具体需求来选择哪种方法