快捷开发

简介 #

SmartChart 提供两种基于模板的低代码开发模式：自动化 DIV 模式（系统自动管理图形容器，适合快速搭建）和自由 DIV 模式（手动控制 HTML 布局，完全自定义）。通过模板开发界面，开发者可以将可视化开发窗口与显示窗口分屏，实现更专业的开发体验。

应用场景 #

  • 专业化开发, 可将仪表盘显示和模板开发分屏开发
  • 当你熟悉smartchart的基础开发后, 你可能会喜欢上现在这种方式

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

方式一: 自动化DIV #

此方式当你新增数据集图形时会自动识别, 无需手动在模板在添加 采用此方式请不要采用点击模板上方菜单的图形新增 如需编辑图形或数据集可按如下方式: 输入图片说明 输入图片说明

方式二: 自由DIV #

你可以模板中按照常规的H5页面编辑, 只是在需要插入图形的地方插入即可(建意通过模板上方的图形新增) 开始畅快的开发

  • 点击图形即可新增一个图形,你甚至可以指定图表的位置, 完全和写html一样, 图形代码段:{{div_list.图表顺序号}}
  • 注意自由DIV模式下的新增图形, 是不自带容器的, 如有需要,可选中"图形代码",点击菜单的容器包裹上容器

输入图片说明

如果使用自由布局, 请删除自动化DIV这一段代码 输入图片说明

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

可以观看视屏, 视屏比较老和现在不太一样, 仅参考即可 自由开发模式视屏

两种模式对比 #

模式 适合场景 图形容器 新增方式
自动化 DIV 快速搭建，无需手动管理容器 系统自动生成并追踪 通过仪表盘界面新增按钮
自由 DIV 完全自定义布局，精确控制位置 手动在 HTML 中插入 {{div_list.序号}} 通过模板上方菜单新增

切换注意：如果使用自由 DIV 模式，需要删除模板中的"自动化 DIV"代码段，两种模式不可混用。

图形代码段语法 # 

<!-- 自由 DIV 模式：在模板 Body 区插入图形占位 -->
{{div_list.0}}  <!-- 0 号图形 -->
{{div_list.1}}  <!-- 1 号图形 -->

<!-- 如需包裹容器（如 smtdrag） -->
<div class="smtdrag" id="id_xxxx">
    {{div_list.0}}
</div>
Edit Edit this page