大屏适配方案

echarts官网: https://echarts.apache.org/zh/index.html

大屏可视化一般是用于大屏展示, 而不同的大屏设备分辨率和宽高比不太一样, 所以同一个网页需要在不同的大屏上完美展示, 就需要做大屏适配   , 大屏适配有以下两种解决方案

1, 图表的尺寸和位置统一使用vw, vh做单位, 宽度都用vw单位, 高度都用vh单位

好处:排版灵活,不会出现图标拉伸
缺点:单位vw vh单位设置复杂
用法:适用于要保证图片不变形,原型图标比较多的情况
2, 按照UI设计稿的原始尺寸(1920*1080) ,使用px为单位实现固定尺寸的图表, 适配时,使网页缩放以占满整个屏幕
好处:操作方便  不易出错
缺点: 图形和文字会拉伸变形
用法: 适用于缩放比例不大,微调的大屏,原始比例和大屏比例差别不大的情况下