Vue中autofit.js实现大屏可视化适配的全面指南

Vue 中 autofit.js 实现大屏可视化适配的全面指南

1、需求是大屏无论在大屏还是小屏都是在当前页面展示，不滚动或者超出；2、需注意下用echarts时，要父级以上都要有高度设置，在echarts的div就可以用100%，而不用写死高度；3、autofit.js 为我们提供了一种便捷的实现页面自适应的解决方案。本文将详细介绍如何在 Vue 中使用 autofit.js 来实现大屏可视化的适配。

一、安装 autofit.js

安装 autofit.js 非常简单，我们可以通过 npm 这一强大的包管理工具来完成。在项目的根目录下，打开命令行终端，输入以下命令：

npm install autofit.js

执行该命令后，npm 会自动从 npm 仓库下载 autofit.js 及其依赖项，并将其安装到项目的node_modules目录中。

二、引入 autofit.js

在 Vue 组件中引入 autofit.js，一般我们会在setup函数中进行这一操作。setup函数是 Vue 3 新引入的一个组合式 API，用于组件的初始化逻辑。假设我们有一个名为App.vue的组件，引入 autofit.js 的代码如下：
vue3写法：

import { onMounted, onBeforeUnmount } from 'vue';

import autofit from 'autofit.js';

export defau