亿信ABI

根据HTML组件制作酷屏报表

根据HTML组件制作酷屏报表

这里通过制作一张酷屏报表,让大家了解酷屏报表的制作过程和设计思路。

根据HTML组件制作酷屏报表

1 概述

1.1制作流程图

18根据HTML组件制作酷屏报表27

 

1.2示例效果

在开始制作前,我们先看下待制作酷屏报表的最终展示效果。

18根据HTML组件制作酷屏报表65

 

 

下面我们按照报表制作流程图来制作报表。

2 制作步骤

2.1 新建酷屏

在【数据分析】下主题集下新建【酷屏】。

18根据HTML组件制作酷屏报表118

 

弹出【选择酷屏模板】对话框,可以根据模板创建(点击相应模板进入即可),也可以新建空白报表,这里我们选择【从空白模板新建】,点击后打开到酷屏设计器。

18根据HTML组件制作酷屏报表194

 

2.2 设置最佳分辨率

在制作酷屏时,一般都会基于某个固定分辨率来制作,以达到在此分辨率下,酷屏的展示效果最佳。酷屏属性中的【最佳分辨率】就是用于指定酷屏大小。这里,我们设置最佳分辨率为1920*1080。

 

基于固定分辨率制作酷屏会导致依据大屏的分辨率制作的酷屏,在小屏上展示时会有滚动条;依据小屏的分辨率制作的酷屏,在大屏上展示时会有空白区域,撑不满。 为解决此问题,酷屏中提供了【缩放比例】属性设置,以适应不同分辨率。,这里我们设置缩放比例为auto,即自适应屏幕大小。

18根据HTML组件制作酷屏报表431

 

注意:

一般情况下,最佳分辨率为根据实际要制作的大屏的大小来填写。

在自适应不同屏幕分辨率的时,组件会存在变形的情况,主要是因为按比例缩放,最佳分辨率的屏幕宽高比和现在展示的分辨率的宽高比会不一致。

2.3 添加组件

接下来我们把已经做好的html组件拖拽到中间设计区,并进行位置、大小、样式等基本属性设置。

 

这里,我们先添加布局组件,并设置布局的背景颜色为#000000

18根据HTML组件制作酷屏报表619

 

18根据HTML组件制作酷屏报表621

 

接着拖入通用标题容器到第一个布局单元格,并完成下图属性设置。

18根据HTML组件制作酷屏报表654

 

再接着拖拽表格轮播组件到第一个布局单元格,完成属性配置。

18根据HTML组件制作酷屏报表685

 

同理,依次完成其他html组件的添加和基本属性设置。

2.4 制作取数表格

组件添加完成后,接下来进行组件的取数设置,支持从表格取数和sql数据源取数,这里我们采用常用的表格取数。

 

首先需制作取数表格。切换到取数态,参考分析报表设计章节,完成取数表格制作。注:点击菜单栏中18根据HTML组件制作酷屏报表820可添加表格。表格制作完成后,点击菜单栏中【预览表格数据】可查看取数表格数据。

18根据HTML组件制作酷屏报表860

 

预览结果:

18根据HTML组件制作酷屏报表868

 

2.5 设置组件取数

取数表格制作好后,我们来设置组件取数。

 

切换到设计态,在表格轮播组件上鼠标右键【取数】,右侧属性面板打开到该组件的取数设置界面:
18根据HTML组件制作酷屏报表943

需要设置的有表头数据,表体内容和列宽。

表头数据这里给出的示例数据为["ColumnA","ColumnB","ColumnC","ColumnD"],这是个一维数组,因为表格的列是确定的,所以,这里可以输入常量为["请假单号,"员工姓名","请假类别","合计天数"],也可以从取数表格中取出表头,写法为<#=[grid1.a1,grid1.b1,grid1.c1,grid1.d1]#>。注:grid1为表格代号,a1、b1这些为表元代号。

 

设置”值“操作:

方式一,点击值,在弹出的取数设置对话框中输入表达式

18根据HTML组件制作酷屏报表1204

 

方式二,点击小手,在取数态中拾取表元

18根据HTML组件制作酷屏报表1225

 

 

 

表体内容这里给出的示例数据为[["a","d","g","f","g","f"],["b","e","h","d","g","f"],["a","d","g","f","g","f"],["b","e","h","d","g","f"]],这是一个二维数组,这个二维数值中的第一个元素为["a","d","g","f","g","f"],是一维数组,代表表格中ColumnA这一列的数据。也就说表体内容是按第一列数据、第二列数据、第三列数据、第四列数据这样组成的二维数组。

18根据HTML组件制作酷屏报表1467

 

参照示例数据,我们从取数表格中取出每列的数据,合成一个二维数组,表达式写法为

<#=[grid1.a2$,grid1.b2$,grid1.c2$,grid1.d2$]#>a2$代表的是a2浮动出来的整列数据,它返回的是一个一维数组。

18根据HTML组件制作酷屏报表1587

 

 

这样设置后,预览效果如下图:

18根据HTML组件制作酷屏报表1605

 

所属中心和岗位这两列没有显示中文,显示的是代码。原因是主题表中确实存的是代码,但该字段关联了维表,abi会自动从维表取出名称显示。

表格轮播组件中也需要显示名称的话,可修改表体内容表达式为<#=[grid1.a2$,[grid1.b2$.select(true,@.txt)],grid1.c2$,[grid1.d2$.select(true,@.txt)]]#>grid1.b2$.select(true,@.txt)用于分别取出表元的显示值。

预览效果如下图:

18根据HTML组件制作酷屏报表1841

 

 

列宽这里我们不设置,就采用默认值,["25%","25%","25%","25%"]

这样,表格轮播组件的取数设置就完成了。

18根据HTML组件制作酷屏报表1908

 

同理,依次完成其他组件的取数设置。

 

取数设置小技巧:

1、参照示例数据和组件效果,确认组件取数需要的数据格式。

2、在组件的取数定义中也能查看示例数据,【组件鼠标右键-查看组件-取数-取数定义】

18根据HTML组件制作酷屏报表2005

 

18根据HTML组件制作酷屏报表2007

 

3、从表格取数时要用宏<#=#>

4、预防取数失败,可做数据调试。在富文本组件中输入要调试的表达式(要用宏表达式),预览验证返回值是否和取数格式一致。

18根据HTML组件制作酷屏报表2081

 

2.6 调整组件样式

接下来对部分组件进行样式调整。

 

针对光晕玫瑰图组件完成系列、事件等属性调整。

18根据HTML组件制作酷屏报表2131

 

 

针对绿色主题线状图组件完成图例、提示框、坐标轴等属性调整。.

18根据HTML组件制作酷屏报表2165

 

2.7 预览并保存

最后,点击菜单栏中【预览】,查看页面开发效果。

18根据HTML组件制作酷屏报表2197

 

预览结果:

18根据HTML组件制作酷屏报表2205

 

 

点击菜单栏中【保存】按钮,完成酷屏报表开发。

18根据HTML组件制作酷屏报表2231

 

附件列表

文档内容仅供参考
如果您需要解决具体问题,还可以登录亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇了解酷屏

下一篇酷屏设计器界面功能介绍

请先登录

创建词条

词条信息

wanglf
wanglf

举人|词条创建者

291

浏览次数:78 次

编辑次数:1次 历史版本

更新时间:2021-09-18