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