在数据可视化和大屏开发中，"适配"永远是绕不开的话题。不同分辨率下如何保持元素比例、位置精准，往往让开发者头疼不已。

引言：我的大屏适配“翻车”现场 领导拍板，1天内完成官网所有界面的响应式适配，我想了下，这还不简单？postcss-px-to-viewport 安排上，vw 单位一把梭！直到测试同事幽幽地说了句：‘

本篇文章主要讲解如何使用组合式函数（Composables）来封装 Echarts，提供一套可复用、易维护的图表解决方案 在这里你能够学到 Echarts 封装的思路与最佳实践

一、组件概述 ScaleBox 是一个基于 Vue 3 和 TypeScript 开发的组件，其主要功能是根据浏览器窗口大小动态调整内部内容的缩放比例，在大屏适配需求上很有用。此外，该组件还提供了矫正

前言 技术栈 依赖引入 首先为了解决echarts的全量引入问题，我们需要单独书写一个echarts依赖引入文件，文件内部之引入我们需要使用的echarts依赖, 通过我们引入部分的 echarts/

最近要做一个要有炫酷效果动画的大屏页面（如下图所示），这种可视化大屏页面最重要的就是要能够吸引人的眼球，让人眼前一亮的感觉，所以我们就需要跟UI同学进行深度沟通，也是在经过多次的修改调试最终才完成了比

做了大屏项目，需考虑自适应。rem布局在带鱼屏上可能出问题，因它基于宽度。要保证长宽比，非仅用rem。本文介绍两种方法，传统和新CSS属性。

大屏重点是贼啦炫酷的动态特效加持。业务核心运营场景：各大地上地下停车场。这里我用的是`three.js`去实现的实际业务场景的场站模拟三维图，无限滚动订单列表和数据动态翻牌和动态图标

1. vue加载Amap