可视化大屏适配/自适应现状
可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因为目前市面上适配工具每一个都无法做到完美的效果，做出来的东西都差不多，最终实现效果都逃不出白边的手掌心，可以解决白边问题的，要么太过于复杂，要么会影响dom结构。
npm包：autofit.js
这是一款可以使你的项目一键自适应的工具 github源码👉go
- 从npm下载
- 引入
- 快速开始
默认参数为1920*929（即去掉浏览器头的1080）, 直接在大屏启动时调用即可
- 使用
以上使用的是默认参数，可根据实际情况调整，参数分别为
export default {
mounted() {
autofit.init({
dh: 1080,
dw: 1920,
el:"#app",
resize: true
},false) // 可关闭控制台运行提示输出
},
}
以上使用的是默认参数，可根据实际情况调整，可选参数有
* - el：渲染的dom，默认是 "#app"，必须使用id选择器 * - dw：设计稿的宽度，默认是 1920 * - dh：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080 * - resize：是否监听resize事件，默认是 true * - ignore：忽略缩放的元素（该元素将反向缩放），参数见readme.md * - transition：过渡时间，默认是 0 * - delay：默认是 0
忽略某些元素
autofit.init({
ignore: [
{
el: ".gaodeMap",
},
]
})
传入 ignore 以使元素不被缩放
更个性化的设置：
autofit.init({
ignore: [
{
el: ".gaodeMap", //必填
height: "300px",//可选，需注明单位
width: "80%",//可选，需注明单位
scale:1.2, //可选：回放程度，基于主元素缩放后的大小
fontSize:26 //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
},
{
//...
}
]
})
如果反向缩放后的元素大小使结构发生变化，你还可以手动传入宽高、回放程度。
ignore还支持传入字符串数组：
autofit.init({
ignore: ['.gaodeMap','.leaflet','#someElementClassOrId']
})
elRectification
一些canvas渲染的图表也会有事件偏移，而图表不同于地图，当使用ignore时，过大的图表可能会显示不全，因此可以使用elRectification （性能上不如ignore）
如果ignore无法满足需求，可以使用 autofit.elRectification(".classNameOrId")
import { elRectification } from 'autofit.js'
<div class="G2plot"></div> <div class="G2plot"></div> <div class="G2plot"></div>
onMounted(() => {
elRectification(".G2plot")
})
使用 elRectification 时，需要被矫正的元素已经挂载
关闭 autofit.js造成的影响
当autofit未初始化时，会出现无法找到元素的错误，在使用autofit.off()前，请确保已初始化。
autofit.off()
源码：GitHub - 995231030/autofit.js: autofit.js 迄今为止最易用的自适应工具
