可视化大屏自适应：autofit.js 一行搞定布局

可视化大屏适配/自适应现状

可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响dom结构。

三大常用方式

1. vw/vh方案

   1. 概述：按照设计稿的尺寸，将px按比例计算转为vw和vh

   2. 优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况

   3. 缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦

2. scale方案

   1. 概述：也是目前效果最好的一个方案

   2. 优点：代码量少，适配简单 、一次处理后不需要在各个图表中再去单独适配.

   3. 缺点：留白，有事件热区偏移，下面介绍的autofit.js已经完全解决了此问题

3. rem + vw vh方案

   1. 概述：这名字一听就麻烦，具体方法为获得 rem 的基准值 ，动态的计算html根元素的font-size ，图表中通过 vw vh 动态计算字体、间距、位移等

   2. 优点：布局的自适应代码量少，适配简单

   3. 缺点：留白，有时图表需要单独适配字体

基于此背景，我决定要造一个简单又好用的轮子。

解决留白问题

留白问题是在使用scale时才会出现，而其他方式实现起来又复杂，效果也不算太理想，总会破坏掉原有的结构，可能使元素挤在一起，所以我们还是选择使用scale方