【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞ 大屏自适应缩放解决方案 =＞ 使用transform:scale =＞ 组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
如果累了就冬眠吧，如果睡不着，就接纳暂时的失眠，不强迫自己入睡。
目录
一、大屏简介
1.数据可视化
2.大屏用途
3.大屏效果展示
二、大屏需求分类
1.固定尺寸的“真实”大屏
2.系统使用的“驾驶舱”页面
三、大屏自适应
1.前端自适应解决方案
（1）使用felx布局
（2）使用rem单位
2.大屏自适应最优解决方案 ==> transform:scale
四、实战开始【速看！重点】
1.创建一个组件SacleBox
2.引用组件
3.用ScaleBox组件包裹整个页面
4.码自己页面
一、大屏简介
1.数据可视化
简单说：将数据通过各种视觉通道映射成图形，可以使得用户更快、更准确的理解数据。
一般可视化需求有：通用报表、移动端图表、大屏可视化、地理可视化、图编辑、图分析。
2.大屏用途
不少甲方都想做酷炫的大屏，用于公司展厅、日常经营监控，还有些特殊行业如交通、运输、工厂制造。
目前常用的几款图表库有Highcharts、Echarts、amCharts等等。后面博主 主要使用Echarts展开讲解
参考链接：https://www.csdn.net/tags/NtDaAg1sNTI4MDUtYmxvZwO0O0OO0O0O.html
3.大屏效果展示
大屏典范： 电商618数据大屏
二、大屏需求分类
博主近三个月接触到了两种大屏。
1.固定尺寸的“真实”大屏
一般使用在企业的巨大的显示器上 用来展示、监测数据情况，一般是不需要频繁操作的。这种只在固定大的屏幕上的大屏，完全可以不使用自适应方案。
2.系统使用的“驾驶舱”页面
之所以叫驾驶舱就是因为他看起来很像，有很多面板数据，并且很有可能有相关操作触发变化。
一般用于系统的首页，帮助用户了解数据的变化，总览系统功能，并能快速链接到功能页面。这种在系统里面的大屏，潜在含义就是需要适应任何分辨率的电脑，因此需要做大屏的自适应。
效果如图：
可以根据页面大小缩放调整宽高，始终保持原始比例，并且画质清除，保证在任何屏幕上都能够展示完全。
三、大屏宽高等比例适应
1.前端自适应解决方案
（1）使用felx布局
要点：使用flex各种布局，结合元素使用百分比
使用场景：H5页面、简单后台业务系统页面
大神笔记： Flex 布局教程：语法篇 - 阮一峰的网络日志
（2）使用rem单位
参考链接：前端自适应实现方法_前端学习笔记-DS的博客-CSDN博客_前端自适应
2.大屏自适应最优解决方案 ==> transform:scale
大屏使用rem 耗时 而且对浏览器最小字体不支持，
使用transform:scale可以节省百分之九十工作量
好处不多说：看一篇文章 学习一下 咱们再来实战！
谈谈关于CSS中transform属性之scale - 热爱前端知识 - 博客园
CSS3 transform-origin 属性 | 菜鸟教程
四、实战开始【速看！重点】
1.创建一个组件SacleBox
<template><divclass="ScaleBox"ref="ScaleBox":style="{width: width + 'px',height: height + 'px',}"><slot></slot></div>
</template><script>
export default {name: "ScaleBox",props: {},data() {return {scale: 0,width: 1920,height: 1080,};},mounted() {this.setScale();window.addEventListener("resize", this.debounce(this.setScale));},methods: {getScale() {// 固定好16：9的宽高比，计算出最合适的缩放比const { width, height } = this;const wh = window.innerHeight / height;const ww = window.innerWidth / width;console.log(ww < wh ? ww : wh);return ww < wh ? ww : wh;},setScale() {// 获取到缩放比例，设置它this.scale = this.getScale();if (this.$refs.ScaleBox) {this.$refs.ScaleBox.style.setProperty("--scale", this.scale);}},debounce(fn, delay) {const delays = delay || 500;let timer;return function () {const th = this;const args = arguments;if (timer) {clearTimeout(timer);}timer = setTimeout(function () {timer = null;fn.apply(th, args);}, delays);};},},
};
</script><style lang="scss">
#ScaleBox {--scale: 1;
}
.ScaleBox {position: absolute;transform: scale(var(--scale)) translate(-50%, -50%);display: flex;flex-direction: column;transform-origin: 0 0;left: 50%;top: 50%;transition: 0.3s;z-index: 999;// background: rgba(255, 0, 0, 0.3);
}
</style>2.引用组件
import ScaleBox from "../../components/ScaleBox/index.vue";
export default {name: "bigScreen",components: {ScaleBox,},data() {return {// ----------------------------------------------------------------}
}3.用ScaleBox组件包裹整个页面
4.码自己页面
注意：
（1）使用px做单位，不使用rem
（2）ScaleBox内部页面元素最大的盒子按照1920*1080为容器 严格计算。所有宽高加起来为1920*1080
（3）最好不要使用百分比分配宽高
至此应该可以完成大屏自适应了，组件化之后也更好用，前期可以直接单独写页面，最后再加上ScaleBox即可，是非常方便简洁的方法。
大家有问题欢迎及时反馈
6月7日更新：
多数友友反应做出来的效果在非全屏下左右两边会存在一定的空白。这里要解释一下，当前案例的实现效果就是如此，在非全屏情况下，由于导航栏存在，页面的真实高度已经不是1080了，这是宽度自然会变小。
总结：
使用ScaleBox的优点：
1.保证页面宽高在任何情况下等比例缩放
2.页面性能最优且代码简洁
【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞ 大屏自适应缩放解决方案 =＞ 使用transform:scale =＞ 组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】相关推荐
- vue create()获取ref_vue-next+typescript 初体验
无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服.Vue 2 可是因为 ts 的缘故被喷 ...
- 前端自适应缩放解决方案
设计师以1920*1080 比例给出设计稿, 需要高还原度实现效果可以使用等比例缩放页面方案,具体代码如下 html,body {background: #010a3d;padding: 0;marg ...
- Vue+Echarts地图消失（高度变成0）的完美解决方案
地图消失了! 最近项目突然发现了一个奇怪的问题,当且到别的页面之后停留一会(20min+),首页的Echarts地图就会消失掉,而且还不一定复现,好不容易复现了一次,查看元素发现地图的容器.svg元素 ...
- Echarts GL 3d地图初体验，浙江天地图作为底图mapbox
网上看到一张图效果非常好,斜45度角模式的3d地图,用在大屏模式上非常有科技感,高端大气上档次. 于是,研究了下怎么做,发现Echarts GL能做出相似的描边3D效果,地图可以加载浙江天地图(如下图 ...
- Echarts五步法加初体验
使用步骤: 引入echarts 插件文件到html页面中 准备一个具备大小的DOM容器 <div id="main" style="width: 600px;hei ...
- js图片宽高等比例压缩
var bili = 0.7;//压缩后的图片尺寸,0.7就是70% var quality = 0.7;//压缩后图片的质量,数字越小图片越模糊$(function () {$("#fil ...
- vue+Echarts 实时大屏看板
此文为本人大屏项目上线后的经验总结 前言 因为是国企线上应用的活动大屏,我就不附图了.代码仅供参考. 一.vue配置 1. 我是用vue-cli 搭建的,大屏项目复杂度不高,vue-router.v ...
- VUE 前端中如何进行组件化开发？
1.前端里面常说的视图层是什么? 我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层. Vue 的核心库只关注视图层 图1: dom对象树结构 图2:DOM和CSS ...
- 视频教程-jQuery交互式前端开发(第一季)：初体验/选择器/事件绑定-jQuery
jQuery交互式前端开发(第一季):初体验/选择器/事件绑定 知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老兵 ¥12. ...
最新文章
- Java面试题汇总及答案2021最新（序列化含答案）
- DiscuzX3.2，3.3升级DiscuzX3.4的详细教程！
- 怎么样设置关闭网页再次登录网页是正常登录状态_学籍系统出现“该账号已登录，不能重复登录”怎么办？...
- windows和linux的协议栈驱动
- 实际的Reactor操作–检索Cloud Foundry应用程序的详细信息
- JWT 实现微服务鉴权
- 大屏难看怎么办？这份大屏制作教程请收好
- 【Java】Java之Collections.emptyList()、emptySet()、emptyMap()的作用和好处以及要注意的地方
- 'int' object has no attribute 'backward'报错 使用Pytorch编写 Hinge loss函数
- ZooKeeper学习第五期--ZooKeeper管理分布式环境中的数据
- C语言之10/16进制字符串和数字转换(四)
- CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 （三）Nginx负载均衡配置...
- topjui.core.js
- 《软件工程》-软件质量管理
- 英特尔 back，全新架构 coming
- 目标检测入门（一）两阶段目标检测的由来
- 视频特效如何制作？快把这些方法收好
- vue实现一个类似浏览器搜索功能(ctrl + f)
- 2018-2019赛季多校联合新生训练赛第七场补题和题解（中石油）
- 发散性思维对养蜂技术的提高作用