一次搞懂数据大屏适配方案 (vw vh、rem、scale)

当接到可视化大屏需求时，你是否会有以下疑问👇如何做一款定制化的数据大屏？ 开发可视化数据大屏如何做自适应？ vm vh、rem、scale 到底哪种比较好？ 时间不够，有没有偷懒的方法？

最近在公司开发了一个可视化大屏，开发定制化大屏，大家可能都一个感受，开发大屏主要是两方面的工作：

而解决了适配问题后，后面就只是一个慢工出细活，耗时间的事情了。

看了网上的各种方案，目前大家采用的大概有 3 种👇

以上 3 种方案在实际应用中该怎么选择视具体情况而定，也有看到大家说自适应在地图的适配中会有一些兼容问题，我这边还没有实践过。

接下来介绍下三种方案的具体实现，方案中的代码都以 vue2.0 和 vue-cli3 搭建的 vue 项目为例，因为是 demo，图表的一些细节就没有过多细致的调整了

当屏幕的尺寸比例刚好是 16:9 时

当屏幕的尺寸比例大于 16:9 时

当屏幕的尺寸比例小于 16:9 时

按照设计稿的尺寸，将px按比例计算转为vw和vh，转换公式如下

即：网页宽度=1920px网页高度=1080px

我们都知道网页宽度=100vw网页宽度=100vh

所以，在 1920px*1080px 的屏幕分辨率下

1920px = 100vw

1080px = 100vh

这样一来，以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位，计算方式如下:

vwDiv = (300px / 1920px ) * 100vwvhDiv = (200px / 1080px ) * 100vh

所以，就在 1920*1080 的屏幕分辨率下，计算出了单个 div 的宽高

当屏幕放大或者缩小时，div 还是以 vw 和 vh 作为宽高的，就会自动适应不同分辨率的屏幕复制代码

util.scss

// 默认设计稿的宽度$designWidth: 1920;// 默认设计稿的高度$designHeight: 1080;

// px 转为 vw 的函数@function vw($px) {  @return math.div($px, $designWidth) * 100vw;}

// px 转为 vh 的函数@function vh($px) {  @return math.div($px, $designHeight) * 100vh;}复制代码

路径配置只需在vue.config.js里配置一下utils.scss的路径，就可以全局使用了

vue.config.js

function resolve(dir) {  return path.join(__dirname, dir);}

module.exports = {  publicPath: "",  configureWebpack: {    name: "app name",    resolve: {      alias: {        "@": resolve("src"),      },    },  },  css: {    // 全局配置 utils.scs，详细配置参考 vue-cli 官网    loaderOptions: {      sass: {        prependData: `@import "@/styles/utils.scss";`,      },    },  },};复制代码

在 .vue 中使用

export default{    name: "Box",}

/*  直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位    */.box{    width: vw(300);    height: vh(100);    font-size: vh(16);    background-color: black;    margin-left: vw(10);    margin-top: vh(10);    border: vh(2) solid red;}复制代码

utils.less

// 默认设计稿的宽度@designWidth: 1920;

// 默认设计稿的高度@designHeight: 1080;

.px2vw(@name, @px) { @{name}: (@px / @designWidth) * 100vw;}

.px2vh(@name, @px) { @{name}: (@px / @designHeight) * 100vh;}

.px2font(@px) { font-size: (@px / @designWidth) * 100vw;}复制代码

路径配置在vue.config.js里配置一下utils.less

function resolve(dir) {  return path.join(__dirname, dir);}

module.exports = {  publicPath: "",  configureWebpack: {    name: "app name",    resolve: {      alias: {        "@": resolve("src"),      },    },  },  css: {    // 全局配置utils.scss    loaderOptions: {      less: {        additionalData: `@import "@/styles/utils.less";`,      },    },  },};复制代码

在 .vue 文件中使用

export default{    name: "Box",}

/*  直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh单位    */.box{    .px2vw(width, 300);    .px2vh(height, 100);    .px2font(16);    .px2vw(margin-left, 300);    .px2vh(margin-top, 100);    background-color: black;}复制代码

// px转vwexport const px2vw = (_px) => {  return (_px * 100.0) / designWidth + 'vw';};

export const px2vh = (_px) => {  return (_px * 100.0) / designHeight + 'vh';};

export const px2font = (_px) => {  return (_px * 100.0) / designWidth + 'vw';};复制代码

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

为了解决这个问题，你需要在各个图表中监听页面尺寸变化，重新调整图表，在 vue 项目中，也可以借助element-resize-detector，最好封装个 resize 的指令，在各图表中就只要使用该指令就可以了，毕竟作为程序员，能偷懒就偷懒

npm install element-resize-detector --save

import resizeDetector from 'element-resize-detector'

这里要注意的是，图表中如果需要 tab 切换动态更新图表数据，在更新数据时一定不要用 echarts 的 dispose 方法先将图表移除，再重新绘制，因为 resize 指令中挂载到的图表实例还是旧的，就监听不到新的 chart 元素的 resize 了，更新数据只需要用 chart 的 setOption 方法重新设置配置项即可。

echarts 的字体大小只支持具体数值（像素），不能用百分比或者 vw 等尺寸，一般字体不会去做自适应，当宽高比跟 ui 稿比例出入太大时，会出现文字跟图表重叠的情况

这里我们就需要封装一个工具函数，来处理图表中文字自适应了👇

export default {  name: "dashboardChart",  data() {    return {      option: null,    };  },  mounted() {    this.getEchart();  },  methods: {    getEchart() {      let myChart = this.$echarts.init(this.$refs.chart);      const option = {        backgroundColor: "transparent",        tooltip: {          trigger: "item",          formatter: "{a} {b} : {c}%",        },        grid: {          left: this.fitChartSize(10),          right: this.fitChartSize(20),          top: this.fitChartSize(20),          bottom: this.fitChartSize(10),          containLabel: true,        },        calculable: true,        series: [          {            color: ["#0db1cdcc"],            name: "计划投入",            type: "funnel",            width: "45%",            height: "70%",            x: "5%",

            minSize: "

            center: ["

            data: [              {                value: 30,                name: "

          {            color: ["

            minSize: "

            center: ["

            data: [              {                value: 35,                name: "

.chartsdom {  width: 100%;  height: 100%;}复制代码方案二：scale

通过 css 的 scale 属性，根据屏幕大小，对图表进行整体的等比缩放，从而达到自适应效果

当屏幕的尺寸比例刚好是 16:9 时，页面能刚好全屏展示，内容占满显示器

当屏幕的尺寸比例小于 16:9 时，页面上下留白，左右占满并上下居中，显示比例保持 16:9

当屏幕尺寸比例大于 16:9 时，页面左右留白，上下占满并居中，显示比例保持 16:9

html 部分

     复制代码

js 部分

至此，页面就已经可以实现 16:9 自适应了。

第三点：屏幕变化，图表自适应屏幕变化后，图表自动调整字体、间距、位移等，此处参考上面 vm vh 的实现方式即可，在此就不重复赘述了

作者：懒惰的智慧 

链接：https://juejin.cn/post/7163932925955112996 

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍