布局指引

### SmartChart布局说明 #

推荐先观看视屏了解 smartchart布局方式

### 容器说明 #

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

> 6.0版本中拖拽布局方式已可同时满足电脑端/移动端的需求

### 响应式布局 #

当你新增一个栅格图形时, smartchart会给你一段默认的代码

    <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) #

只是用响应式布局可能对于复杂的布局不是很方便, 你也可以采用拖拽绝对定位的方法, 这样你可以随意指定图形的所在位置. 方法可参考视屏 拖拽说明 你可以配合使用 ”模板开发“ 来实现高度定制化的效果， 参考 模板开发指引

### 混合布局(PRO) #

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