数据可视化开发过程总结

使用angular开发数据可视化项目，并适应大屏显示

一般大屏项目是要求比例 16：9的

我们在页面设计的时候，可以将页面作如下设计，echarts放置我们的大屏项目，这样就可以保证页面比例适中

.app_body {
   position: relative;
   height: 0;
   padding-top: 56.28%;  
    //这里padding-top继承的是父级元素也就是屏幕宽度的56.28% 现在本盒子的高度：宽度 = 9：16
   width: 100%;
   background-color: black;
   .echarts{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
   }
 }

而echarts内部的页面适配，可以用相对单位或者百分比确定，以保证在大分辨率下页面可以正常显示

相对单位rem 和 em

在使用rem的时候，要考虑rem是相对于根元素的font-size大小，要保证根元素的font-size确定和适配。

在使用em的时候，要考虑em是相对于上一层的父元素font-size大小，不能随意的设置元素的font-size，以保证整个盒子的em大小一致。