数据可视化大屏 前端屏幕多分辨率适配方案(vue,echarts)

数据可视化大屏 前端屏幕多分辨率适配方案(vue)

写在前面:
第一次写博客, csdn账号注册很久了, 应该是2010年注册的, 当时我还在上高中, 当时还在写易语言的, 有些问题搞不懂的会来csdn看大佬是怎么解决的, 也写了些没什么用的小工具上传到csdn, 当然现在都在用git了. 很多人好奇, " 你为什么要学易语言, 垃圾语言 " , 当时是实在看不懂英语, 但是对编程(当时的理解就是编程)很有兴趣, 非常想学.
现在回想从 c语言 易语言 vb javascript java python , 一路过来都在学习, 但是好像从来没有写过什么东西, 遇到过无数的bug, 掉了无数根头发, 现在大学毕业了, 赶上了2020年的疫情, 这次经历让我对生命有了新的看法, 也是时候静下心来写些东西, 沉淀一下自己的历程了! 第一次写博客不知道写什么, 胡乱写了这么一段, 留在这里, 反正也没有人看, 回头再看到自己第一篇博客的时候, 希望不忘初心!

项目代码链接: gitee 代码链接

一直在写 react 的, 新到一家公司, 同事都是写 vue , 改写 vue 不太习惯, 觉得还是 react 用起来更灵活更顺手一些. 好久没写前端了, 现在也回忆一下前端适配, 也回忆一下 vue 的写法

项目有一个数据可视化大屏的需求, 要展示一些数字资源的使用情况,里面有一些 echarts 的图表,使用量一般是用仪表盘的形式,使用情况是一段时间数据的柱状图.

这个项目是由我同事来写的, 他的习惯是直接按照设计稿的px像素直接写到页面上, 在电脑上预览的时候没有什么问题, 但是这个项目要部署在一块很大的大屏上的, 这个时候就发现了问题所在, 屏幕不适配!!!

我也是刚来到这个公司和那个同事关系比较好, 我的工作也基本完成了, 所以我决定帮帮他. 选择一个合适的适配方案然后还需要快速的把代码完成改版, 最终我用java写了一个代码转换工具, 一键帮同事把代码转为适配

方案选择

1. px 转 rem
2. viewpoint
3. 媒体查询 @media
4. 计算屏幕缩放比 动态设置像素值

每个人有不同的适配经验, 我这个同事适配经验比较少, 之前写小程序适配是用的 rpx , 这个类似于 rem 了.

备选方案1: px转rem

px 转 rem 是基于页面的fontSize 设置一个 rem 与 px 换算比例 比如 16px=1rem , 20px=1rem 根据不同的屏幕设计不同的, 页面fontSize, 在移动端开发中这种方案非常常见.

html {
    /* 普通状态 */
	font-size: 20px
}
html {
    /* 1.5倍分辨率 */
	font-size: 30px
}
html {
    /* 2倍分辨率 */
	font-size: 40px
}
.div-box {
   
	width: 5rem; /* 5倍的font-size 普通状态下 = 100px */
}

但是当前的项目可能并不适用:

1. 页面中有其他已经开发有其他的元素有导航文字, 设置fontSize时会影响到页面中已经写好的内容
2. 页面中使用了 echarts 图表, 里面的参数没办法应用 rem 的比例
   
   

备选方案2: 媒体查询

媒体查询是比较常见的屏幕适配方案了, 可以根据不同的屏幕大小提供不同的样式方案, 媒体查询可以很好的支持多数的pc端网页布局需要了.

@media only screen and (max-width: 1000px) {
   
    .div-class {
   
        width: 720px;
    }
}

但是问题也是比较明显:

1. 大量书写媒体查询代码, 比较繁琐
2. 针对多种屏幕进行适配, 也无法保证完全兼容所有的屏幕
3. 也无法支持 echarts 图表中的参数进行适配
   
   

备选方案3: viewpoint 视口

viewpoint 基本是目前多数移动端开发都会使用的适配方式, 可以设置对移动端设备的的界面进行整体的缩放, 这种方式的适配是最佳的方案. 但是缺点是很明显的, 只能在移动端进行 viewpoint 适配, 我们目前的数据大屏项目就没办法用了.

<meta name="viewport" content="target-densitydpi=high-dpi" />

## 最终采用方案: 计算屏幕缩放比 我们的设计稿宽高比是 `1920 * 960` 由于这个数据可视化的项目是适配宽屏的, 我可以先铺满高然后屏幕左右可能会有空白, 空白的部分用背景图片填充就好了. 画面的布局像素依然使用设计标注的像素值然后再乘屏幕缩放比.

页面适配样例代码(vue) :

<template>
	<div class="chart-container" :class="chartContainer">
		<div :style="[{
      width:202*rate+'px',height:184*rate+'px',marginLeft:134*rate+'px',marginTop:40*rate+'px',}]">
		</div>
	</div>
</template>

<script>
  // 宽高比
  const scale = 1920 / 960; 
  // 屏幕导航高度
  const headerHeight = 47; 
  // 标签栏高度
  const tabHeight = 27; 
  // 标签栏间隔
  const pageMargin = 5; 
  // 设计稿高度
  const designHeight = 960; 
  // 画面上方间隔高度
  const marginTop = headerHeight + tabHeight + pageMargin;
  // 画布下方间隔高度
  const marginBottom = pageMargin;
  // 页面宽度
  const clientWidth = document.body.clientWidth;
  // 页面高度
  const windowHeight = document.body.clientHeight;
  // 面试高度去年 上方间隔 下方间隔
  const clientHeight = windowHeight - marginTop - marginBottom;
  // 画面高度
  const innerHeight