---
weight: 1
type : docs
bookFlatSection : false
---
### 整理一份完整的SmartChart布局说明
推荐先观看视屏了解[smartchart布局方式](https://b23.tv/2YwZfCi)

### 容器说明
<img src="https://foruda.gitee.com/images/1662694261562716350/1cbcf1f0_5500438.png" height="200px">

| 容器 | 说明 |
| :-----| :----: |
| 定位容器 | 用于图形定位, 有拖拽和栅格两种. 在界面上新增时会自带;在模板编辑中新增图形时需自行加入容器| 
| 图形容器 | 用于图形选择, 使用id选择器, 如序号为2的容器, 选择器为#container_2 |
| 图形 | 可视化的实际单位, 如选择图形中的table标签, 可使用#container_2 table|


### 响应式布局
一般移动端报表推荐使用响应式布局, 一次布局可以同时满足电脑端/移动端的需求
当你新增一个数据集时, smartchart会给你一段默认的代码
```html
<div class="el-col-xs-24 el-col-md-24" style="padding:0.2rem;height:50%;" >
  <div style="height:100%;" id="container_{name}"></div>
</div>

el-col-md-24 : 电脑端宽度设定
控制图形父容器的宽度, 整行分成24个栅格, 如果你想让图形占一半, 就可以改成el-col-md-12
el-col-xs-24 ：移动端宽度设定
padding:0.5% 0.5%:
控制图形的上下, 左右内边距,  padding: 上 右 下 左
比如你想要图形在容器中往下走一点, 你可写成 padding: 1% 0 0 0
height:50%;
盒子的高度, 相对于父容器的高度， 最外层即浏览器高度
```

### 大屏开发推荐使用拖拽布局（PRO)
大家如果开发大屏, 只是用响应式布局可能对于复杂的布局不是很方便, 你也可以采用拖拽绝对定位的方法, 这样你可以随意指定图形的所在位置.
方法可参考视屏 [拖拽说明](https://www.bilibili.com/video/BV1PD4y1c7uz/)
你可以配合使用 ”模板开发“ 来实现高度定制化的效果， 参考 [模板开发指引](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2)

### 混合布局(PRO)
你可以考虑先用响应式布局把整体框架画出来, 如果要加一下装饰的情况, 可以用绝对定位(拖拽布局)来实现
