数据大屏自适应方案

前言

做数据可视化大屏页面的时候我们经常会纠结于如何适配不同尺寸的屏幕，也要考虑过多的echarts图表如何随屏幕尺寸的改变而自适应。以往我的解决方式是通过lib-flexible和postcss-px2rem两款插件，实际就是使用rem的方式对大屏进行适配,而图表则是通过 echarts内部的resize()方法,监听页面尺寸发生改变的时候触发自适应方法。 window.onresize = function () { dom.resize() }，但是缺点很多，实际效果差强人意，修改较多。因此今天我向大家推荐一个新的方法使用scale()进行适配，真的很香。

代码如下

自适应的核心代码我单独封装在了一个公共js里如下

这段代码的核心其实就是通过css中的scale属性对我们的屏幕进行等比缩放 我们将当前屏幕的宽高比和设计稿的宽高比进行对比

如果当前屏幕比例<设计稿比例。那么我们需要缩放的比例就是屏幕宽度除以设计稿宽度

如果当前屏幕比例>设计稿比例。那么我们需要缩放的比例就是屏幕高度除以设计稿高度

最后我们将计算出来的比例交给scale()函数对我们的页面根据屏幕尺寸进行伸缩，以达到能适应不同屏幕的效果，并且不再需要对单个echarts图表进行自适应适配。