前端数据可视化大屏适配方案
scale
实现： 通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放
优点
- 代码量少，适配简单
- 一次处理后不需要在各个图表中再去单独适配
缺点
- 因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
- 当缩放比例过大时候，字体和图片会有一点点失真
- 当缩放比例过大时候，事件热区会偏移。
rem + vw vh
实现：
- 获得 rem 的基准值 2.动态的计算 html 根元素的 font-size
- 图表中通过 vw vh 动态计算字体、间距、位移等
优点
- 布局的自适应代码量少，适配简单
缺点
- 因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况
- 图表需要单个做字体、间距、位移的适配