大屏可视化方案

大屏设计 UI尺寸：https://zhuanlan.zhihu.com/p/262237518
一 ：场景&例子：

dp1.jpeg

2.png

截图1来源、https://www.szqianren.com/#/ProjectBrowse/comprehensive
截图2来源、http://datav.jiaminghi.com/demo/construction-data/index.html

二、前端技术
1、布局，如何去使页面达到最佳效果（不被压扁、文字不会重合、充满整个屏幕等等）、下面推荐的方案三、也会具体讲讲方案三的实现方案；

  方案一： 媒体查询 ---- 【屏幕大小不好控制】

 方案二： vw、vh 实现自适应 ---- 【vh vw 要去深入理解】

 方案三： flex布局 + transform：scale属性 ----- 【tran 推荐】

2、对于为什么使用方案三： 通过调研 如上面的两个案例 、网易有数、百度suger（ https://www.jianshu.com/p/b2fd58d31515）都是通过scale 实现，有点如下：

   1、我们不需要去对单位进行转换、可以直接用px为单位和平时开发一样

   2、很好理解

   3、 展现的效果比较好【原图缩放而已】

3、实现方案：

   1、屏幕窗口的大小： window.screen.width、window.screen.height

   2、可视窗口的大小：document.body.clientWidth、document.body.clientHeight

  所以： scale = document.body.clientWidth / window.screen.width; 即可

  配合 transform-origin： "left top"，页面缩放效果比较好；

参考方案： 百度suger： https://www.jianshu.com/p/b2fd58d31515

               DataV demo：[http://datav.jiaminghi.com/demo/construction-data/index.html](https://links.jianshu.com/go?to=http%3A%2F%2Fdatav.jiaminghi.com%2Fdemo%2Fconstruction-data%2Findex.html)

4、对于大屏里面元素【图表、动画等】 ---- echarts(复杂图表格) + DataV(简单大屏结构、动画)
1、echart.js: （http://echarts.apache.org/zh/）百度团队、拥有诸多不一样的数据图表类；
2、DataV: （http://datav.jiaminghi.com/）阿里团队、提供一系列模版、可以直接使用；
3、antV: (https://antv.gitee.io/zh) 阿里团队、 antV有底层绘图引擎 G、关系可视化类库 G6、移动端图表类库 F2、可视化语法类库 G2; 学语 法成本较高(https://antv-g2plot.gitee.io/zh/examples/gallery)
4、移动端f2： https://antv.alipay.com/zh-cn/f2/3.x/index.html
5、注意事项
* window的resize事件最好几个防抖截流函数 debounce
* 当页面关闭 或者切到另外一个页面 都必须清楚resize事件
* 清楚resize必须保证是同一个函数 不然不会起效果

3.png

6、浏览器 变小后效果

4.png