①方案一：vw vh：按照设计稿的尺寸，将px按比例计算转为vw和vh；
假设设计稿尺寸为 19201080（做之前一定问清楚 ui 设计稿的尺寸），即：网页宽度=1920px，网页高度=1080px。我们都知道，网页宽度=100vw，网页宽度=100vh，所以，在 1920px1080px 的屏幕分辨率下，1920px = 100vw，1080px = 100vh，这样一来，以一个宽 300px 和 200px 的 div 来说，其所占的宽高，以 vw 和 vh 为单位，计算方式如下:
vwDiv = (300px / 1920px ) * 100vw
vhDiv = (200px / 1080px ) * 100vh
所以，就在 1920*1080 的屏幕分辨率下，计算出了单个 div 的宽高
当屏幕放大或者缩小时，div 还是以 vw 和 vh 作为宽高的，就会自动适应不同分辨率的屏幕。
这种使用方式有个弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整。为了解决这个问题，你需要在各个图表中监听页面尺寸变化，重新调整图表，在 vue 项目中，也可以借助element-resize-detector，最好封装个 resize 的指令，在各图表中就只要使用该指令就可以了；
②方案二：scale：通过 css 的 scale 属性，根据屏幕大小，对图表进行整体的等比缩放，从而达到自适应效果。
当屏幕的尺寸比例刚好是 16:9 时，页面能刚好全屏展示，内容占满显示器；
当屏幕的尺寸比例小于 16:9 时，页面上下留白，左右占满并上下居中，显示比例保持 16:9；
当屏幕尺寸比例大于 16:9 时，页面左右留白，上下占满并居中，显示比例保持 16:9；
③方案三：rem + vw vh：要解决三件事，1、获得 rem 的基准值；2、页面内写一段 js 代码，动态的计算html根元素的font-size；3、屏幕变化后，图表自动调整和图表字体、间距、位移等的自适应；
（参考：mp.weixin.qq.com/s/eTfMLFSaQ…
