前端大屏幕项目的一点思考-技术圈

前端大屏幕项目的一点思考

共 2306字，需浏览 5分钟

· 2021-05-12

想必近几年前端的数据可视化越来越重要了，很多甲方爸爸都喜欢那种炫酷的大屏幕设计，类似如下这种：

遇到的这样的项目，二话不说，echarts 或者 antv，再搭配各种 mvvm 框架（react，vue），找二次封装过的组件，然后开始埋头开始写了，写着写着你会发现，如何适配不同屏幕呢？css 媒体查询吧，用 vw 吧，哪个好点呢。其实写到最后，我觉得都不好。

对于这种拿不定主意的情况呢，最好还是参考大厂的做法，于是去找了百度suger等，他们是如何写这样的页面的。

案例链接：https://sugar.aipage.com/dashboard/5f81db321ff3e080e9f09168c923854f

仔细观察他们都采用 css3 的缩放 transform: scale(X) 属性，看到这是不是有种豁然开朗的感觉。

于是我们只要监听浏览器的窗口大小，然后控制变化的比例就好了。

以React的写法为例：

getScale=() => {    // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改    const {width=1920, height=1080} = this.props    let ww=window.innerWidth/width    let wh=window.innerHeight/height    return ww<wh?ww: wh}setScale = debounce(() => {    // 获取到缩放比，设置它    let scale=this.getScale()    this.setState({ scale })}, 500)

监听window的resize事件最好加个节流函数debounce。

window.addEventListener('resize', this.setScale)

然后一个简单的组件就封装好了。

import React, { Component } from 'react';import debounce from 'lodash.debounce'import s from './index.less'
class Comp extends Component{  constructor(p) {    super(p)    this.state={      scale: this.getScale()    }  }  componentDidMount() {    window.addEventListener('resize', this.setScale)  }  getScale=() => {    const {width=1920, height=1080} = this.props    let ww=window.innerWidth/width    let wh=window.innerHeight/height    return ww<wh?ww: wh  }  setScale = debounce(() => {    let scale=this.getScale()    this.setState({ scale })  }, 500)  render() {    const {width=1920, height=1080, children} = this.props    const {scale} = this.state    return(      <div        className={s['scale-box']}        style={{          transform: `scale(${scale}) translate(-50%, -50%)`,          WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,          width,          height        }}      >        {children}      </div>    )  }  componentWillUnmount() {    window.removeEventListener('resize', this.setScale)  }}
export default Comp

.scale-box{  transform-origin: 0 0;  position: absolute;  left: 50%;  top: 50%;  transition: 0.3s;}

只要把页面放在这个组件中，就能实现跟大厂们类似的效果。这种方式下不管屏幕有多大，分辨率有多高，只要屏幕的比例跟你定的比例一致，都能呈现出完美效果。而且开发过程中，样式的单位也可以直接用px，省去了转换的烦恼~

注：图表插件bizcharts在css缩放下会有鼠标移入时像素偏移的bug，由于是基于antv的，这主要是antv的bug，我写这篇文章的时候官方还未修复这个bug，echarts没有这个bug。