反馈已提交

网络繁忙

使用特殊符号美化报表

  • 文档创建者:axing
  • 编辑次数:8次
  • 最近更新:Leo.Tsai 于 2021-11-26
  • 1. 概述

    1.1 问题描述

    在制作报表的过程中,经常需要添加一些小图标来美化报表,这时候一般都是选择插入图片来实现。

    但是插入图片容易增加报表内存,而且在满足不同条件显示不同图标的场景下设置比较麻烦。

    如何简单实现插入小图标呢,如下,使用特殊符号来代替图片。

    image.png

    1.2 实现思路

    特殊符号可以直接复制粘贴,在需要插入的地方直接输入就行。

    若对于某些特殊符号,不同浏览器或者不同版本的设计器无法显示、乱码问题,可以采用下面的链接:小图标来代替。

    2. 示例

    2.1 准备数据

    创建数据集 ds1,SQL 语句如下:

    SELECT 销售员,sum(销量) as 销量 FROM 销量 

    where 产品='${产品}'

    group by 销售员 order by 销量 desc

    image.png


    2.2 设计表格

    报表设计如下,A2 单元格输入公式seq(),设置左父格为 B2。

    image.png

    2.3 添加特殊符号

    1)A2 单元格添加一个条件属性,当前值为 1 时,设置字体大小为 16 号,字体颜色为金色。新值为♚,如下图所示:

    image.png

    2)同理再给 A2 单元格添加另外两个条件属性。

    • 当前值为 2 时,设置字体大小为 16 号,字体颜色为银色,新值为♚

    • 当前值为 3 时,设置字体大小为 16 号,字体颜色为铜色,新值为♚

    3)参数面板添加默认生成的控件,设置 label 的默认值如下:

    image.png

    4)产品控件选择为下拉框,设置下拉框数据字典如下:

    image.png

    2.4 效果预览

    1)PC 端

    保存报表,点击分页预览,效果如下图所示:

    image.png

    2)移动端

    同时支持 App 端和 H5 端预览,效果如下图所示:

    image.png

    3. 模板下载

    已完成模板参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\使用特殊符号美化报表.cpt

    点击下载模板:使用特殊符号美化报表.cpt

    4. 注意事项

    4.1部分特殊符号预览后可能显示多余的]]>,如下图所示:

    image.png

    1)单元格中可以使用形态公式来解决

    replace($$$,"]]>","")

    image.png

    2)控件中可以使用初始化后事件来解决

    var a=this.getValue().substring(0,4); // 实际截取长度根据具体情况改变
    this.setValue(a);

    image.png

    4.2 矢量图代替图标

    在该网站(矢量图)可下载任意需要的图片且可以自己配色(此处以皇冠为例)

    4.2.1 选择并下载图片

    1.png

    4.2.2 图片放入单元格

    将下载后的图片,自适应放入单元格即可

    2.png

    4.2.3 效果如下

    3.png

    附件列表


    主题: 报表专题
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭