---
weight: 2
type : docs
bookFlatSection : false
---
### 应用场景
- 专业化开发, 可将仪表盘显示和模板开发分屏开发
- 当你熟悉smartchart的基础开发后, 你可能会喜欢上现在这种方式

把你的可视化页面移动的显示器上吧, 进入"模板" 开发页面(上节介绍如何进入)

### 方式一: 自动化DIV
此方式当你新增数据集图形时会自动识别, 无需手动在模板在添加
采用此方式请不要采用点击模板上方菜单的图形新增
如需编辑图形或数据集可按如下方式:
![输入图片说明](https://images.gitee.com/uploads/images/2022/0729/141339_fbe1d081_5500438.png "屏幕截图.png")
![输入图片说明](https://images.gitee.com/uploads/images/2022/0729/141545_57483077_5500438.png "屏幕截图.png")

### 方式二: 自由DIV
你可以模板中按照常规的H5页面编辑, 只是在需要插入图形的地方插入即可(建意通过模板上方的图形新增)
开始畅快的开发
- 点击图形即可新增一个图形,你甚至可以指定图表的位置, 完全和写html一样, 使用{{div_list.图表顺序号}}
![输入图片说明](https://images.gitee.com/uploads/images/2022/0117/215618_27eccfd3_5500438.png "屏幕截图.png")

>warning 
>注意请尽量避免删除DIV, 如果你中途有删除过div, 序号会不一样, 
>你可以在"布局"中重排序保持一致, 保持数据集编号从0开始

>如果使用自由布局, 请删除自动化DIV这一段代码
![输入图片说明](https://images.gitee.com/uploads/images/2022/0729/140057_7afad3bf_5500438.png "屏幕截图.png")

- 选中生成的图形代码段, 点击菜单栏的 数据集, 图形, 布局开发， 即可进入开发界面, 如果没有数据集, 会自动帮你新建

可以观看视屏, 视屏比较老和现在不太一样, 仅参考即可
[自由开发模式视屏](https://www.bilibili.com/video/BV1uQ4y1Q7Lf/)
