1.如何设配屏幕

首先设计稿的项目宽高比是16:9

如果屏幕刚好宽度和高度比是16:9，就不需要我们调整，直接和屏幕尺寸一样大就可，但如果屏幕的宽高比不是16:9，那就需要我们想想如何布局了。

如果屏幕的宽/高大于16:9，我们就需要优先水平方向上局中，然后等比例放大我们的项目，让高度与屏幕高度相同，左右局中。在不超过屏幕尺寸的前提下我们的布局就可以达到最大化。反过来如果宽/高小于16:9，就要尽量让宽度和屏幕宽度一样，然后垂直居中就OK了。

宽/高小于16:9

宽/高大于16:9

算法：

Wp 为页面有效宽度
Hp 为页面有效高度
页面左右居中，上下居中，四周留白即可
然后在 head 里用 JS 设置 1rem = Wp / 100

2.如何适配一个div

div在设计稿的宽度：

假设一个div在设计稿中长100px，设计稿宽度为2420px，那么div在页面中的长度为100/2420*100rem,用函数表示则为：

 const clientWidth = document.documentElement.clientWidth;
 const clientHeight = document.documentElement.clientHeight;
 window.pageWidth=clientWidth/clientHeight>16/9 ? clientHeight*(16/9) :clientWidth;
 const pageHeight = pageWidth/(16/9)
 const px = (n) => (n / 2420) * (window as any).pageWidth;

3.将div水平垂直居中

水平方向:直接margin：0 auto就可以居中。

垂直方向:可以用浏览器的高度减去div的高度，得到的值除以2，将这个值设置为div的margin-top，div就可以垂直居中了。

  root.style.height =pageHeight+'px'
  root.style.marginTop =(clientHeight-pageHeight)/2+'px'

4.使用 grid 布局

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

display: grid;
    grid-template:
      "box1 box2 box4 box5" 755fr
      "box3 box3 box4 box5" 363fr / 366fr 361fr 811fr 747fr;
    grid-column-gap: px(28);//行空隙
    grid-row-gap: px(28);//列空隙

5.使用 echarts

首先需要安装echarts

npm install echarts --save

在项目中引用：

import * as echarts from 'echarts';

然后根据官网中的示例来设置自己所要的样式

示例：Examples - Apache ECharts

6.最终成果展示

大屏可视化项目 large-screen-react

大屏可视化项目实践总结