页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

概述说明

自助仪表盘支持三种布局方式:高宽自适应、宽度自适应和固定大小,可以根据需要选择合适的布局方式,快速地做出符合某个业务场景的仪表盘。

自助仪表盘支持三种布局方式:高宽自适应、宽度自适应和自由布局,可以根据需要选择合适的布局方式,快速地做出符合某个业务场景的仪表盘。

功能入口

设置布局方式是在页面工具下选择“布局”,通过点击选择的方式,定义仪表盘的布局。 如下图:

Image Modified

 



面板
borderColor#BBBBBB
bgColor#F0F0F0
borderWidth1
borderStylesolid

目录


对比说明

三种布局方式显示效果以及使用场景对比如下:

效果布局方式描述
Image Modified

 


高宽自适应(默认值)

设置了高宽自适应后,仪表盘会自动调整大小以填充用于显示仪表盘的窗口;

此种布局方式适用于单屏展示的仪表盘,比如CEO看板;

功能详情请参考 高宽自适应模式:展示型仪表盘 章节。

Image Modified

 

 



宽度自适应

设置了宽度自适应后,仪表盘会自动调整显示宽度以适应不同设备的宽度,但高度固定以实现垂直滚动效果;

此种布局方式(流式布局)适用于报告型的仪表盘,比如汽车销售季度报告;

功能详情请参考 宽度自适应模式:报告型仪表盘 章节。

Image Modified
 


自由布局

固定大小

设置了自由布局的布局方式后,不管用于显示仪表盘的窗口的大小如何,仪表盘都保持相同的大小;

设置了固定大小的布局方式后,不管用于显示仪表盘的窗口的大小如何,仪表盘都保持相同的大小;

此种布局方式适用于大屏展示的仪表盘(明确知道显示窗口大小),比如监控中心大屏;

另外固定大小能指定组件的确切位置,如果仪表盘中有浮动对象,选用此种布局效果更佳;

另外自由布局能指定组件的确切位置,如果仪表盘中有浮动对象,选用此种布局效果更佳;

功能详情请参考

固定大小模式:大屏型仪表盘 章节。

固定大小

 

 

 


注意

自助仪表盘布局需遵循规则:从上到下,从左到右。切换布局也需遵循此规则进行自动调整。(如:平板/电脑布局切换到手机布局)。


自由布局

缩放方式

自由布局支持设置缩放方式,四种缩放方式详细说明如下:

缩放方式
效果

等比缩放宽度铺满

定义:

宽度铺满全屏,高度按比列自动缩放。

说明:

  • 当高度小于屏幕,则垂直居中显示,出现上下两边留白。
  • 当高度大于屏幕,出现垂直滚动条。

Image Added

  等比缩放高度铺满

定义:

高度铺满全屏,宽度按比列自动缩放。

说明:

  • 当宽度小于屏幕,则水平居中显示,出现左右两边留白。
  • 当宽度大于屏幕,出现水平滚动条。


Image Added

全屏铺满

定义:

不保持高宽比例,按当前屏幕大小显示全部内容。

Image Added

不缩放

定义:

保持画布原先的大小。


Image Added


注意

目前手机端暂不支持缩放。

渲染方式

支持设置图形渲染方式。两种渲染方式:

  • SVG:一种使用XML描述2D图像的语言。文本渲染能力强,刷新能力弱。适用于大区域渲染程序,比如高保真图形、带有某些特效的静态图像。
  • Canvas:HTML5新增的DOM,提供了像素级图形编程接口。文本渲染能力弱,刷新能力强。适用于图像密集型编程。比如高性能图形、复杂场景的实时动画。

鹰眼

注意

“鹰眼”功能为V9.7版本功能

鹰眼用于在自由布局模式下通过缩放的方式来查看自助仪表盘的全景图,以便用户从全景的角度对自助仪表盘进行调整。

开放鹰眼功能首先需要将当前自助仪表盘设置成“自由布局”模式,然后通过缩小、放大和高宽自适应三种方式来查看全景图:

Image Added

注意:画布大小缩放是以百分比来设置的,其范围最大值为500%,最小值为25%。


信息

在自由布局模式下,提供了一些键盘的快捷键如下:

  • 方向键(上下左右)或 Ctrl+方向键(上下左右):组件向选择的方向移动5px;
  • Shift+方向键(上下左右):组件向选择的方向移动1px;
  • 鼠标拖动组件+Ctrl:组件会生成标线,可用于对齐组件的位置。如果拖拽到另一个组件附近并松开鼠标,组件会自动吸附并对齐到另一个组件上。

Image Added