 **由于我们移除了boostrap的布局方式, 此布局不再做推荐!** 
初次学习的同学, 可能会需要一个拖拉拽的布局方式(3.9.9.13以上才支持), 所以下面介绍的是smartchart的辅助布局方法
- 你可以在"布局" 中找到入口
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/175555_73e10028_5500438.png "屏幕截图.png")

- 进入编辑器后, 你可以拖拉拽的方式进行布局, 注意我们建意你一个column(C)容器只放一个smartchart的图形便于标准化
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/175407_42027a6e_5500438.png "屏幕截图.png")

- 点击"生成", 复制相关代码
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/180334_b08207c4_5500438.png "屏幕截图.png")

- 回到仪表盘"布局", 粘贴到编辑器, 点击 "闪电" 图标, 进行转化, 可能会提示你数据集不够,这样你需要新增足够数量的数据集后再点转化
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/180631_676fc8b9_5500438.png "屏幕截图.png")

注: 代码转化布局你可以不用可视化辅助, 可以用其它任意每三方布局工具生成代码后粘过来生成, 需要注意的格式是:
 在你需要数据集的地方使用以下代码即可:
```html
<div style="height:100%"  id="container_{name}"></div>

```


- 转化完成后, 点击保存即可应用布局
![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/180911_ca30e40a_5500438.png "屏幕截图.png")

![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/181014_ecdc7504_5500438.png "屏幕截图.png")