可视化大屏适配

1、 scale方案

1. 概述：也是目前效果最好的一个方案
2. 优点：代码量少，适配简单 、一次处理后不需要在各个图表中再去单独适配
3. 缺点：留白，有事件热区偏移，下面介绍的autofit.js已经完全解决了此问题

2、vw/vh方案

1. 概述：按照设计稿的尺寸，将px按比例计算转为vw和vh
2. 优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
3. 缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦

3、 rem + vw vh方案

1. 概述：这名字一听就麻烦，具体方法为获得 rem 的基准值 ，动态的计算html根元素的font-size ，图表中通过 vw vh 动态计算字体、间距、位移等
2. 优点：布局的自适应代码量少，适配简单
3. 缺点：留白，有时图表需要单独适配字体

 使用

1、安装

npm i autofit.js

2、在App.vue中引入

import autofit from 'autofit.js'

3、使用

onMounted(() => {
  autofit.init({
    dh: 1080,
    dw: 1920,
    el: "body",
    resize: true,
  });
});

• el : 选择一个 autofit.js 影响的 dom 元素，默认是 "body"，支持所有 css 选择器 (推荐使用 id)

• dw : 设计稿的宽度，默认是 1920

• dh : 设计稿的高度，默认是 1080

• resize : 是否监听 resize 事件，默认是 true，关闭后无法自动计算拖动后的大小

• ignore : 忽略缩放的元素（该元素将反向缩放），参数见下文

• transition : 过渡时间，默认是 0

• delay : 默认是 0

• limit : 默认是 0.1，当缩放阈值不大于此值时不缩放

 开发文档：autofit.js (larryzhu-dev.github.io)

关于autofit.js 问答与解惑： autofit.js 问答和食用指南我正在参加「掘金·启航计划」 前段时间做了一个自适应的小工具（vue-autofit - 掘金 (juejin.cn)