大屏可视化项目总结

rem适配方案：
假设设计稿是750px,把屏幕分为15份，每一份的宽度作为html的字体大小。即为1rem = 750/15 = 50px
当为屏幕为320px时，1rem = 320/15 =21.33。
怎么获取屏幕宽度，一种可以写媒体查询，一种可以通过js，document.documentElement.clientWidth
假设设计稿的宽高比是16/9，那么浏览器里的比例也要是16/9。

项目问题

1.使用vue搭建项目框架

2.在js文件里，获取浏览器的宽高，通过一定公式算出不同屏幕下的rem。假设设计稿为1920px，宽高比是16/9。

      const deviceWidth=document.documentElement.clientWidth;
      const deviceHeight=document.documentElement.clientHeight;
      const pageWidth=deviceWidth / deviceHeight > 16 / 9 ?  deviceHeight * (16/9) : deviceWidth 
      const pageHeight = pageWidth / (16/9) 
      const str = `<style>html{font-size:${pageWidth/100}px}</style>`
      document.write(str)

3.在组件里mounted里设置容器div的宽高

4.设置px()函数，使用rem作为单位

@function pxToRem($x){
    @return $x / 2420 * 100rem
}

5.布局使用display:grid;网格布局

display: grid;
    grid-template: 
    ".box1  .box2 .box3" 1fr/14fr 168fr 20fr 318fr 20fr 168fr 14fr;

6.给边框加渐变效果，原理：

    &::before{
            content: '';
            position: absolute;
            left: 0;right: 0;top: 0;bottom: 0;
            border-radius: 4px;
            box-shadow: 
            21px 0 0 -20px white,
            -21px 0 0 -20px white,
            0 21px 0 -20px white,
            0 -21px 0 -20px white,
            11px 0 0 -10px red,
            -11px 0 0 -10px red,
            0 11px 0 -10px red,
            0 -11px 0 -10px red;

        }

7.echarts的使用
地图，使用了china.json文件生成，在echarts里echarts.registerMap('CN', china)设置地图。