可视化大屏适配/自适应现状
可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？由于现在市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，终极实现效果都逃不出白边的手掌心，可以解决白边题目的，要么太过于复杂，要么会影响dom结构。
三大常用方式
- vw/vh方案
- 概述：按照设计稿的尺寸，将px按比例计算转为vw和vh
- 优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
- 缺点：每个图表都需要单独做字体、间距、位移的适配，比较贫苦
- scale方案
- 概述：也是现在效果最好的一个方案
- 优点：代码量少，适配简单 、一次处理后不需要在各个图表中再去单独适配.
- 缺点：留白，有事件热区偏移，下面介绍的autofit.js已经完全解决了此题目
- rem + vw vh方案
- 概述：这名字一听就贫苦，具体方法为获得 rem 的基准值 ，动态的计算html根元素的font-size ，图表中通过 vw vh 动态计算字体、间距、位移等
- 优点：布局的自适应代码量少，适配简单
- 缺点：留白，有时图表需要单独适配字体
autofit.js初代焦点代码
- function keepFit(designWidth, designHeight, renderDom) {
- let clientHeight = document.documentElement.clientHeight;
- let clientWidth = document.documentElement.clientWidth;
- let scale = 1;
- if (clientWidth / clientHeight < designWidth / designHeight) {
- scale = (clientWidth / designWidth)
- document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
- } else {
- scale = (clientHeight / designHeight)
- document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
- }
- document.querySelector(renderDom).style.transform = `scale(${scale})`;
- }
- import autofit from 'autofit.js'
默认参数为1920*929（即去掉浏览器头的1080）, 直接在大屏启动时调用即可
- // App.vue 需要在renderDom挂载到dom之后，才可以生效
- export default {
- mounted() {
- autofit.init({
- designHeight: 1080,
- designWidth: 1920,
- renderDom:"#app",
- resize: true
- })
- },
- }
- * - renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器
- * - designWidth（可选）：设计稿的宽度，默认是 1920
- * - designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
- * - resize（可选）：是否监听resize事件，默认是 true
使用了autofit.js依然出现了白边
由于autofit.js使用的是scale方案，transform: scale() 缩放时，dom元素在文档中的实际占位是稳定
这样下方就出现了白边，右侧还出现了滚动条
解决此题目将body设置超出埋伏即可：
1
2
3
| body{
overflow: hidden;
}
|
在设置超出埋伏后，滚动条和白边都不见了。
#app布满了全屏，内里的元素却不能自适应位置。
出现这种题目的原因很显着，你需要将内容元素做一个简单的适配定位，由于autofit.js只做了缩放和填充部分。如果你的页面元素没有做均匀分布的位置，也是会出现这种情况的。
以上图为例
如果出现了这个题目，保举使用flex进行布局即可。
1
2
| display:flex;
justify-content: space-between;
|
大概直接使用定位，将三块内容定位到左上、中间、右上。
1
2
3
4
5
6
7
8
| .left, .right {
position: fixed;
width: 25%;
height: 100%;
top: 0;
padding-top: 70px;
z-index: 9999;
}
|
手动缩放浏览器窗口时，echarts图表被拉伸了
这个题目按说不会是由于autofit.js引起的（条件是你没有使用百分比），但是既然有人提到了，这里说一下解决办法。
echarts图表拉伸，分析你的echarts外层容器变大大概变小的，导致canvas元素拉伸了，解决办法为：
1
2
3
4
5
6
| window.addEventListener('resize', this.redraw, false);
redraw() {
this.myChart.clear();
this.myChart.resize();
this.draw();
},
|
像我这样，监听resize事件，并重绘echarts即可。
手动缩放浏览器可以正常适应，点击最大化（或F11全屏）时却失效了
这个题目属于autofit.js的一个bug，现在在最新版本已经修复了。
造成Bug的代码
1
2
3
4
5
6
7
| if (clientWidth / clientHeight < designWidth / designHeight) {
scale = (clientWidth / designWidth)
document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
} else {
scale = (clientHeight / designHeight)
document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
}
|
造成这个bug的原因是，全屏时的宽高比不小于（由于是即是）设计图宽高比，导致高度没有被重新设置。
所以在曾经设置过高度（即基于宽度px稳定的缩放），再最大化的情况，高度不会变。在这种逻辑下，宽度有时也会失效。
修改后的代码（1.0.8）：
1
2
3
4
| let scale = (clientWidth / clientHeight < designWidth / designHeight) ? (clientWidth / designWidth) : (clientHeight / designHeight)
dom.style.height = `${clientHeight / scale}px`;
dom.style.width = `${clientWidth / scale}px`;
dom.style.transform = `scale(${scale})`;
|
这样无论是怎样的宽高比，它都会同时设置宽度和高度。
使用autofit.js后，在小屏幕上字体（或元素）变得过小
造成这种题目的原因大概率是你同时使用了其他自适应工具，大概使用了相对单位，导致你的网站进行了双重适配。
解决方式也很简单，autofit.js不需要任何其他辅助工具，如果想体验autofit.js一行搞定，关闭其他插件，且不要使用任何相对单位即可！
autofit.js仅保举使用px进行开辟。
使用autofit.js后，地图事件热区偏移了
不要手动设置：transform-origin，由于autofit.js将它设置成了 0 0，即以左上角为基准点缩放，这可以保证dom元素不会偏移。
如果你使用的地图是基于canvas绘制的，那么有大概会出现偏移现象（往往陪同着拉伸），那么和上面的echarts的解决方式一样，只需要重绘就可以了。
如果是基于svg绘制的，那么不应该会出现这个题目。
原生项目或jquery项目引入方式
将准备好的包放在项目中，通例引入方式<script src="assets/autofit/autofit.js"></script>
需要修改autoofit.js文件，将//export { elRectification };
//export default autofit;注释掉，不然报错，固然如果你项目支持import方式可以不用注释掉；
在你的项目js中使用autofit.init()同上
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
