以前写过一些大屏可视化的实现方式，发现有点落后了，更新下。
能学到的知识
- 1、PC数据可视化项目，实现响应式一篇搞定
- 2、配合 蓝湖 使用，主要是取元素的样式、色值，完美还原
- 3、基于
vue2、vue cli4、echarts 5
效果图
浏览器默认状态
1920x1080
1440x900
1366x768
1024x768
实现
主要思路就是，根据设计图的尺寸，用css的transform: scale缩放页面。
实现缩放主要代码
changeScale() {
const body = document.documentElement
const scale1 = body.clientWidth / this.width
const scale2 = body.clientHeight / this.height
const scale = scale1 < scale2 ? scale1 : scale2
this.styleObj.transform = `scale(${scale}) translate(-50%, -50%)`
}
translate，是为了让页面的缩放保持宽高比，要配合对应容器的css实现，例如本项目的：
.bigscreen {
width: 1920px;
height: 1080px;
overflow: hidden;
position: fixed;
top: 50%;
left: 50%;
transform-origin: left top;
}
上面的实现，其实不用translate也行的，但是页面的高度在某些屏幕下会被压扁，因为屏幕尺寸和设计图的宽高比不一致，有兴趣的自己尝试了
关于绑定数据
为了可读性，一般都把页面按模块分割成组件引入使用的。数据的绑定，一般2种情况：
1、大屏的数据一个接口全部返回
这种情况，给每个需要数据的组件设置props属性，然后在主页面请求数据，传参就行，具体看代码了，不复杂。
2、每个图表模块都单独一个接口返回数据
这种情况就在对应组件请求数据，绑定数据就行了
代码总览
涉及的文件如下（具体参考代码）：
|-- src
|-- views
|-- bigscreen // 实例所在
|-- index.vue
|-- index.scss
|-- index.js
|--components
|-- header.vue
|-- leftView
|-- index.vue
|-- index.scss
|-- index.js
|-- rightView
|-- index.vue
|-- index.scss
|-- index.js
|-- centerView
|-- index.vue
|-- index.scss
|-- index.js
|-- bottomView
|-- index.vue
|-- index.scss
|-- index.js
|-- utils
|---utils.js
|-- styles
|-- box.scss // 大屏共用样式
代码
按代码总览的目录去代码里找着看就行了。
总结
大屏的布局，各种各样，自己看情况修改了，这里只是做个例子。这里的方案，可以保证设定尺寸下的页面，以设定尺寸为基础缩放，达到响应式的效果。现在做的项目，大多数都是以1920x1080的设计图来做，和蓝湖配合，基本可以很简单的就达到设计图90%+的效果，剩下的10%，主要是因为地图无法百分百的随意还原，其它部分都是可以完美实现的。
拓展
数据可视化，图表的实现，用的是 Echarts，至今做了不少大屏项目，总结的一套用法，比较成熟和稳定了，Echarts的使用可参考以下
