属性，然后通过 scale 缩放 来自适应。 外层通过 margin: 0 xxpx 实现居中展示。

几个月前我写了一篇关于从零开发一款可视化大屏制作平台 的文章， 简单概述了一下可视化大屏搭建平台的一些设计思路和效果演示， 这篇文章我会就 如何设计可视化大屏搭建引擎 这一主题， 详细介绍一下实现原理

大屏可视化屏幕适配的几种方法 公司要开发数据可视化大屏，研究了几天资料，把自己的研究成果发出来，希望能够帮到大家。

去年4月1日，罗永浩直播带货首秀在抖音进行，这场直播累计观看人数超过3000万人，销售额最终超1.1亿。接着网上发布了对于这场直播数据的可视化大屏展示，很多人都好奇这个是用什么做的，今天就带大家做。

这篇文章记录了我开发中遇到的问题和解决方法。

先放一个预览地址：点击查看效果 gif预览： 适配屏幕 算法 Wp为页面有效宽度，Hp为页面有效高度。 页面左右居中，上下居中。 若页面宽/高＞16/9，就左右留白。若页面宽/高＜16/9，就上下留白

在拿到设计图后，通常会先通过设计图的布局来思考代码的设计，这也是开始着手写代码前必须要进行的一步，在项目中，我曾遇到，在一张大屏图开发到一半的时候介入，和另一个前端一起进行开发，结果由于她将整张图上的所有图表都放到一个vue文件里面，结果导致整个页面的代码数量级达到上千行，并且…

之前刚上掘金lv4的时候，有小伙伴就调侃树酱说，“树酱君，你要“女装”呀”（啊呆你看你带的好节奏），树酱我这一个180的大壮汉女装是见不得人的，还是不要玷污社区这一片净土。于是我换一种文明点的形式，树酱君一直很喜欢音乐，平时唱歌🎤也是我生活中不可缺少的一种乐趣，一首周杰伦的《…

一个基于 vue、datav、Echart 框架的 " 数据大屏项目 "，通过 vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改。 项目需要全屏展示（按 F11）。 项目部分区域使用了全局注册方式，增加了打包体积，在实际运…