布局指引

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

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

图形懒加载(隐藏布局) #

  • 有些场景需要用程序来控制图形的显示, 可以使用懒加载数据集来实现
  • 由于懒加载数据集不会在模板中存在布局, 但可以在模板中自定义布局, 比如数据集2为懒加载数据集, 且我们编辑过里面的图形
  • 可以在模板中需要的位置加入以下, 如果是3号数据集则id=“container_3”
<div style="height:100%;display: none" id="container_2"></div>

进行占位即可 之后就可以手动触发图形的显示, 比如通过点击button的动作

$('#id_button').click(()=>{
    $('#container_2').css('display', 'block');
    ds_refresh(2);
})
Edit Edit this page