现状 下图是一个1920*1080的大屏示意图 使用常规的缩放方法，让大屏在窗口内最大化显示。大屏在不同的窗口中出现了空白区域，并没有充满整个屏幕。 新的方法  在缩放的基础上，对指定的要素进行贴边处

前言 之前写了一篇可视化大屏开发，知道了这些经验以及解决方案，效率至少提升2倍！（上）经验总结，发现有7千多人比较感兴趣，看来还是有不少人有这方面需求的。 今天我将继续将我的经验全盘托出，毫无保留的奉

前言 开发过大屏可视化应用的前端工程师们通常会有这样的共识： 在可视化开发过程中，最具有挑战性的并非各种图表的配置与效果展示，而是如何确保大屏在不同尺寸的屏幕上都能实现良好的适配。 原始解决方案 起初

突然收到领导通知需要紧急重构大屏项目，是这样的，大屏上有很多个模块，比如学校信息，教师信息，学生信息，违纪情况，考勤，打分等等，由多个模块组成。随着模块的增多，学校与学校之间产生了差异

为什么是类大屏项目? 大屏项目适用吗? 因为笔者做的项目，采用的大屏项目的缩放方案，但又不是纯粹的大屏项目，所以就叫类大屏项目 文中提到的问题和解决方案，在大屏项目也适用 什么是基于缩放方案的大屏项目

常见的几种可视化适配方案如下 vw，vh：主要是将设计稿px通过计算换算成vw，vh， 可以进行同比缩放但是同时又不会出现白边的情况【唯一的缺陷是比较麻烦：要为每一个图表单独设置 字体、间距、位移 的

前言 本项目基于vue3.4+echarts5来实现数据可视化展示模版，采用了scale动态屏幕适配方案，来解决浏览器放大、缩小导致数据大屏变形的问题。 代码仓库：https://github.com

前言 之前写了两篇可视化大屏开发的经验总结，还没浏览的可直接跳转： # 可视化大屏开发，知道了这些经验以及解决方案，效率至少提升2倍！（上） # 可视化大屏开发，知道这些解决方案，效率至少提升2倍！（

背景 想必在平常开发中，遇到要适配各种不同尺寸的屏幕、分辨率，甚至一套代码要兼容PC端到手机端对前端来说是比较头疼和麻烦的事情。 如果要在时间很紧迫的情况下去一套代码，要在大屏、PC和移动端都可运行，