乐创者报表在设计时开放了表格线(线条样式、粗细、颜色)、字体(字体名称、颜色、大小、粗体、斜体)、背景(背景色、背景图片)、对齐(水平、垂直、自动换行)、间距、旋转角度等属性配置,一些属性还开放了运行时根据属性表达式自动设置的能力,给设计人员提供了极大的自由度。
  与此同时,还提供了基于ECharts的饼图、圆环图、折线图、条形图、面积图、散点图、气泡图、K线图、仪表盘、雷达图、漏斗图、混搭图等,样式美观、种类丰富。
  基于以上这些能力,报表设计者可以设计出各种表样复杂和灵活多样的报表。

但是,在实际操作中,很多用户反馈做出来的报表要么千篇一律,要么看上去错乱无章。到底如何才能做出一些比较规范或是炫酷的报表,本章节给出一些建议和技巧。

1、系统自带单元格样式

对于初学者,建议先使用系统自带的单元格样式,这样可以快速的、规范化的形成一张报表样式:

系统自带单元格样式提供了以下样式:

样式名称
属性说明
默认 设置为默认字体名称:宋体、字体大小:9pt水平居中、边距:默认、边框:、背景色:取消自动换行
标题 设置 字体名称:宋体、字体大小:14pt字体加粗水平居中,其他不变
副标题 设置 字体名称:宋体、字体大小:10pt水平居中,其他不变
页头 设置 字体名称:宋体、字体大小:9pt水平居中,边框:『1px solid rgb(224,228,231)』,背景色:“rgb(245,245,245)”,其他不变
明细 设置 字体名称:宋体、字体大小:14pt水平居左,边框:『1px solid rgb(224,228,231)』,其他不变
数量 字体名称:Arial、设置 水平居右,数字格式:数值,格式串:『#,##0;-#,##0』,其他不变
金额 设置 字体名称:Arial、字体大小:9pt水平居右,数字格式:数值,格式串:『#,##0.00;-#,##0.00』、取消自动换行,其他不变
¥金额 设置 字体名称:Arial、字体大小:9pt水平居右,数字格式:数值,格式串:『“¥”#,##0.00;”¥”-#,##0.00』、取消自动换行,其他不变
百分比 设置 字体名称:Arial、字体大小:9pt水平居右,数字格式:百分比,格式串:『0.00%』、取消自动换行,其他不变
普通文本 设置 字体名称:Arial、字体大小:9pt取消自动换行,其他不变
多行文本 设置 字体名称:Arial、字体大小:9pt自动换行,其他不变

典型案例1
设计效果:

预览效果:

2、自定义样式

当需要设计与系统自带风格不一样的报表风格时,设计器可通过单元格属性中的对应控件进行设置,以字体颜色为例:

可在常用颜色中选择获取颜色,也可以切换到自定义:

同理,设置好该单元格的其他样式后,可通过以下两种方式可以快速应用到其他单元格:

  • 格式刷:点击选中源单元格,然后点击工具栏上的“格式刷”按钮,,然后,点击目标单元格即可。
  • 目标单元格右键选择“样式”,在弹出的样式窗体中,选择对应的样式,点击『确定』按钮即可。

4、巧用单元格属性表达式

在一些特定业务场景下(如:数据告警等),可以通过单元格属性栏中的表达式动态改变对应属性值,以字体颜色为例:

通过设定条件和对应值,在报表执行时,动态根据C4及扩展单元格的值,来动态显示对应颜色。

3、添加图片/图标装饰

为了好看,表头、表尾、特定的位置可添加一些图片装饰。如果使用图片,尽量使用应用图片或系统图标,如下图所示:

应用图片/系统图片、系统图标都是公用资源,不会重复占用内存,性能会比较好。而本地图片是当前报表独有的,无法实现不同报表实例间共享。

常见配置推荐规范

  • 页头区域字体颜色要比明细区域配色要深一些,如果要凸显,可选择加粗,字号可略大一号;
  • 页头区域内容一般都建议设置为水平居中,垂直居中;
  • 其他区域:文本内容设置为水平居左,数值/百分比设置为水平居右
  • 数值格式建议开启“千分位”,方便用户一眼就能看出每个数量的级别;
  • 表格的线条不要设置过粗,颜色不要比文字内容深;
作者:柳杨  创建时间:2023-06-16 12:46
最后编辑:柳杨  更新时间:2024-10-31 17:13