# 简介
# 业界解决方案
## 百度的 sugar 可视化解决方案
https://sugar.baidu.com/home
## 阿里datav
https://data.aliyun.com/visual/datav
## 腾讯云图
https://cloud.tencent.com/product/yuntu
# 尺寸
现在一般的大屏设计基本都是16:9 或者是 32:9的尺寸
# 设计稿
设计稿给出来的图也基本是16:9的图，1920*1080
# 自适应尺寸
按照设计稿来说1920*1080切图展示是没有问题的，但是一个还是需要兜底方案的，就是需要兼容其他尺寸的页面，所以需要一个自适应的方案
## scale + margin 方案
就是dashboard 大屏的页面 设置 `style="width: 1920px;height: 1080px;"`
属性，然后通过 `scale` 缩放 来自适应。
外层通过 `margin: 0 xxpx` 实现居中展示。
```html
<div class="wrapper">
<div class="container">
<div class="dashboard-bg-image"></div>
<div :style="marginStyle">
<div style="position: relative;">
<div class="dashboard-container" style="width: 1920px;height: 1080px;" :style="transformStyle">
<top-title :title.sync="title"></top-title>
<!-- left -->
<dashboard1></dashboard1>
<!-- right -->
<dashboard2></dashboard2>
<!-- right -->
<dashboard3></dashboard3>
<!-- right -->
<dashboard4></dashboard4>
</div>
</div>
</div>
</div>
</div>
```
```css
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.container {
background-color: rgb(3, 12, 59);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.dashboard-bg-image {
width: 100%;
height: 100%;
position: absolute;
background: url('../assets/bg2.jpg');
}
.dashboard-container {
position: relative;
user-select: none;
width: 100%;
height: 100%;
transform-origin: 0 0;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
transition: all .3s linear;
overflow: hidden;
}
```
# github
https://github.com/bosscheng/big-dashboard
https://bosscheng.github.io/big-dashboard/
