单元格标识说明

模板里面可能使用条件属性、过滤、参数注入、形态、分页等功能进行设计，设计后每个单元格上都有个独立标志，如下图所示：

过滤标记-黄色小三角（左下）

条件属性标识-红色小三角（左上）

形态标识-绿色小三角（左上）

单元格属性->尾页独行隐藏 - 蓝色小三角（左下）

行前/行后分页-绿色小三角（右上）

列前/列后分页-玫红色小三角（右上）

自定义单元格内容/形态

单元格可以是斜线、公式类型的，或者是图片、二维码、条形码形态的。可以在单元格配置面板的形态标签里设置单元格的形态。

图片

图片形态单元格：单元格内放置图片。

设置步骤：选中一块单元格区域，点击工具栏中的按钮，选择需要展示的图片点击确定后，会合并选中区域的单元格，右上角有一个图片角标，并且单元格中展示图片路径，点击预览的时候才会展示图片。还可以在配置面板中设置图片的布局方式。

当单元格本身是数据列单元格时，点击工具栏的图片图标，不会弹出选择文件弹窗，而是直接给单元格设置右上角的图片角标，该图片单元格在预览时展示的图片路径跟该单元格最终的值有关。

二维码

二维码形态单元格：单元格的内容在预览的时候转化成二维码进行展示。

设置步骤：选中一块单元格区域，点击工具栏中的按钮，选中区域的单元格会进行合并，并且合并后的单元格右上角会出现一个二维码的图标，也可以通过配置面板中的形态标签里的下拉框进行设置，还可以在配置面板中设置二维码的大小、颜色、纠错等级等。当进入预览页面，单元格中的值会转化成二维码进行展示。

纠错等级详情：

等级	纠错能力	适用场景
L级	约7%	洁净环境、屏幕显示
M级	约15%	常规打印、标准场景（推荐）
Q级	约25%	户外广告、易污损环境
H级（默认）	约30%	高磨损场景、二维码带Logo

二维码预览

条形码

条形码形态单元格：单元格的内容在预览的时候转化成条形码进行展示。

设置步骤：选中一块单元格区域，点击工具栏中的按钮，选中区域的单元格会进行合并，并且合并后的单元格右上角会出现一个条形码的图标，也可以通过配置面板中的形态标签里的下拉框进行设置，还可以在配置面板中设置条形码的大小、外边距等。当进入预览页面，单元格中的值会转化成条形码进行展示。

条形码配置

条形码预览

斜线

斜线类型单元格：单元格中设置斜线。

设置步骤：选中一块单元格区域，点击工具栏中的按钮，会弹出设置斜线内容的弹窗，输入斜线文字，以'|'分隔，例如：Season|Product，点击确定后，选中区域的单元格会进行合并，将刚才输入的斜线内容展示在合并后的单元格中。

注：v0.7.2版本后支持动态斜线值配置，配置方式有所改动

新版斜线配置支持「普通」、「公式」两种类型，普通即继承原有版本的配置方式。公式方式支持写入单元格地址、公式、函数等

斜线（V0.7.2 已废弃此配置方案）

斜线（V0.7.2 新配置方案）

公式

公式类型单元格：公式的作用是用来动态计算单元格数据，在单元格中设置公式，预览的时候公式会进行计算展示最终的值。

设置步骤：选中一个单元格，点击工具栏中的按钮，会弹出公式设置弹窗，输入公式点击确定后，会将公式内容填充到单元格中，在预览的时候，公式单元格展示的值是经过公式计算后的值。想要修改公式单元格的值，可以双击该公式单元格，会重新弹出公式弹窗。如下图所示，在公式弹窗中输入了SUM(A1,B1)，指的是A1单元格的值跟B1单元格的值相加等于C3单元格的值。

数据字典

数据字典类型单元格：当原始数据中存储的字段不适宜展现在报表上；或原始数据在数据查询时不易修改，但对显示在报表中的值有要求，或需要根据不同的原始数据在报表中显示不同的值时，就可以利用数据字典做巧妙的转化。

设置步骤：选中一个单元格，通过配置面板中的形态标签里的下拉框进行设置，选中数据字典形态，有两种类型可以设置，分别是数据查询、自定义。

数据查询的使用示例：配置一个名为ds1的数据集，有两个字段分别是code跟actualValue，在A1单元格中拖入ds1数据集中的code字段（设置纵向扩展），但是预览时需要展示的是ds2单元格的actualValue字段，所以需要给A1单元格配置数据字典去做一个映射。操作步骤如下：

给A1单元格设置形态为数据字典，类型设置成数据查询。
数据集选择ds1。
实际值选择code。
显示值选择actualValue。

设计器配置：

数据集数据：

预览效果：

自定义的使用示例：配置一个名为ds1的数据集，在A1单元格中拖入ds1数据集中的address字段（设置纵向扩展），地方有华东跟华北两种，但是预览的时候希望华东地区映射成水产品货源，华北地区映射成谷物货源。操作步骤如下：

给A1单元格设置形态为数据字典，类型设置成自定义。
点击配置自定义数据字典按钮，弹出配置页面，去配置自定义数据字典。
实际值「华东」对应显示值「水产品货源」，实际值「华北」对应显示值「谷物货源」。

设计器配置：

数据集数据：

预览效果：

单元格背景图片设置

报表支持为单个或多个单元格设置背景图片，下面以多个单元格背景图片设置进行举例说明。

示例：选中多个单元格后在上方操作栏中找到【背景】图标并点击，弹出【单元格背景设置】弹窗，选择需要作为背景的图片上传并确认。

弹窗关闭后，可见设计器内对应选中区域已有刚才上传的图片为背景（设计器内对背景图片做透明度处理，便于内容编辑），可在该背景上对单元格进行内容填写，预览可见对应背景及内容，如下图所示：

若需要对该背景图片进行修改替换，只需要双击插入单元格背景区域的第一个单元格（该单元格左上方有绿色三角，右上方有图片角标标识），即可打开弹窗对当前单元格背景进行修改。

注意，由于该单元格承担双击编辑功能，故不可编辑（在该单元格添加文字）

单元格扩展设置

扩展方向

单元格属性中的扩展方向主要包括：「不扩展」「纵向」「横向」。如果当前单元格是数据列单元格，并且表示的是一个数据集合，设置该属性可以选择数据是依次从上至下的显示，即纵向扩展（行方向的扩展）还是依次从左到右的显示，即横向扩展（列方向的扩展），当然也可以选择不扩展。

横向

数据横向扩展，数据集合里有几个数据就插入多少列。

纵向

数据纵向扩展，数据集合里有几个数据就插入多少行。

不扩展

数据不扩展，数据集合里的数据通过逗号进行分割展示在一个单元格中。

父格设置

可以给一个单元格设置左父格或者上父格，可以设置的选项包括：「无」「默认」「自定义」。父格就是单元格之间的关系连接，可以让一个单元格与另一个单元格建立关系。如地区单元格与销售员单元格之间就可设置单元格关系，如果销售员单元格的父格设置为地区那么销售员单元格则会根据父格的数据来展开。

「无」：就是不设置单元格的父格，该单元格扩展时不考虑单元格之间的分组关系。
「默认」：
- 左父格：向左依次寻找，找到是纵向扩展的单元格作为父格。但在依次往前寻找的过程中，若遇上没有设置父格的单元格则查找中断。
- 上父格：向上依次寻找，找到是横向扩展的单元格作为父格。但在依次往上寻找的过程中，若遇上没有设置父格的单元格则查找中断。
「自定义」：单元格之间存在扩展关系，但是它们不相邻无法使用默认设置时，通过「自定义」来设置它们之间的父子格关系。

横向左父格

以地区跟销售员为例，单元格之间存在纵向扩展的关系时，设置左父格。

输入：

输出：

纵向上父格

以地区跟销售员为例，单元格之间存在横向扩展的关系时，设置上父格。

输入：

输出：

延伸设置

配置该选项可以使父格随子格的扩展而被拉大，默认是勾选的。对于单元格的可伸展性，可分为：「纵向可伸展性」、「横向可伸展性」。

纵向可伸展

如下图所示，医院字段跟院区字段的扩展方向都是纵向，医院是院区的父格，默认设置了医院字段是纵向可扩展，所以最终该医院纵向所占的单元格数为该医院下对应院区（子格）数量的总和。如果设置纵向不可扩展，医院不会随着院区（子格）的扩展而被拉大。

纵向可伸展：

纵向不可伸展：

横向可伸展

如下图所示，医院字段跟院区字段的扩展方向都是横向，医院是院区的父格，默认设置了医院字段是横向可扩展，所以最终该医院横向所占的单元格数为该医院下对应院区（子格）数量的总和。如果设置横向不可扩展，医院不会随着院区（子格）的扩展而被拉大。

横向可伸展：

横向不可伸展：

扩展后排序

「扩展后排序」在「单元格属性>扩展>扩展后排序」中设置，设置在需要排序的左父格上，一般设置在「最父格」。该功能是在表格通过父子格关系扩展完后，对指定的单元格进行排序。可选项包括：「无」「升序」「降序」，选择升序降序后，可以填入公式。

如下图的配置，在A2单元格（最父格）中设置「扩展后排序>降序」，公式中输入$$D4，则A2单元格会根据D4单元格的计算结果进行排序。

单元格条件渲染

条件属性用于在运行时根据数据改变单元格的值或样式。当前可配置颜色、字体、背景、行高、列宽、新值、边框、超链接和内容显隐九类属性。

配置步骤：

选中目标单元格，打开“条件属性”。
新增规则，并在上方勾选本规则需要控制的属性。
在条件编辑器中返回布尔值，或返回包含已勾选属性的对象。
有多条规则时调整顺序；列表越靠下，冲突属性的优先级越高。
保存后进入报表预览，用能覆盖 true、false 和空值的测试数据验证。

例如，金额为负数时显示红色并替换空值：

if ($$currentValue == null || $$currentValue === '') {
  return { newValue: '-' };
}

return {
  color: Number($$currentValue) < 0 ? '#d93025' : '#262626'
};

注意：必须先在规则上方选择“颜色”和“新值”，脚本返回的同名属性才会生效。脚本在预览/运行阶段执行，设计状态下看不到最终结果。

可应用的场景包括：

数据列中，希望在某个范围的单元格数值颜色突出。
希望高亮显示其中的最大值或最小值。

支持多条件

可设置多个条件属性，通过条件属性在列表中的顺序，越往下优先级越大，比如条件属性1设置了文字颜色是红色，条件属性2设置了文字颜色是绿色，那么优先级高的覆盖优先级低的，最终预览的时候文字颜色是绿色。可对条件属性做复制、上移、下移、排序、删除、新增等操作。

单元格表达式

在编辑器中，我们可以输入一段javascript代码。最终返回的表达式可以是一个布尔值也可以是一个对象。

JavaScript 语法表达式

这段javascript代码可以返回布尔值，也可以返回对象。

如下图所示，表达式返回的是一个布尔值，返回true的时候说明条件成立，上方配置的属性在预览的时候都会展示出来，返回false说明条件不成立，上方配置的属性无效。如果当前单元格的值在运行时等于3，则根据上方配置的属性来看，当前单元格的字体颜色在预览时会变成红色。

注：如果上方属性区域没有配置对应的属性，即使条件编辑里返回的对应的属性值也无效。例如条件编辑里写入“return {color: 'red'}”，如果上方属性中没有选择颜色，预览的时候也无效。

可以返回一个固定结构的对象，对象内部的属性跟上方可配置的条件属性一一对应，可以设置的属性有：「color」「bgColor」「font」「newValue」，最终对象内部的属性值会覆盖上方配置的条件属性值。下方代码块是可返回的对象的数据结构：

return {
       color: '#fff',
       bgColor: '#fff',
       font: {
           fontFamily: 'Arial',
           bold: false,
           italic: false,
           fontSize: 12,
           fontColor: '#000',
           underline: 0, // [0]:没有下划线 [1]:实线
           lineThrough: false
       },
       newValue: 1, // 也可以是表达式，如：$$currentValue + "拼接"
       contentVisibility: true
   }

如下图所示，返回了一个对象，里面包含了color属性，代表文字颜色，属性值配置了#aaa，根据覆盖原则，最终预览的时候该单元格的文字颜色为#aaa。

返回具体表达式逻辑将在运行时执行

条件属性中编写的javascript代码，在设计器阶段不会执行，会在最终的预览阶段执行，比如给公式单元格设置了一个currentValue === 3这种表达式，涉及到当前单元格的最终值，需要公式计算完成之后，才能进行比较。

作用域注入

运行时可使用 $$currentValue、$$scope、$$reportInfo、$$meta、$$pageInfo、$$rowsCount、$$rowData、$$dataSet 和 $$A1 等变量，分别表示当前单元格值、全局作用域、报表信息、单元格元数据、分页信息、当前页总行数、当前单元格管辖的数据、数据集信息和单元格信息。编辑器右侧会显示当前场景实际可用变量及说明。

报表基础信息

在编辑器中注入了报表的一些基本信息，通过$$reportInfo变量来表示，该变量是一个对象，内部有na、cd、version这三个属性，分别表示报表名称，报表编码和报表版本。

当前单元格信息

在编辑器中注入了当前单元格的元数据，通过$$meta变量来表示，该变量是一个对象，内部有row，col这两个属性，分别表示当前单元格的行数，跟当前单元格的列数。如下图所示，通过meta上的row属性，给一个数据列单元格做了一个偶数行文字颜色高亮的设置。

全局作用域信息

在编辑器中注入了全局作用域中配置的变量，可以通过$$scope.来引用这些变量，如果在全局作用域中配置了a变量，在条件编辑器中可以通过$$scope.a来使用该变量。如下图，我们用到了作用域中配置的title属性，在条件编辑器中用作用域中的title属性跟当前值进行拼接，设置成单元格新值。

表达式响应

在预览时，通过表达式返回的具体值来做判断，最终可以对单元格的当前值、字体、背景或颜色做修改。

当前值

当前值指当前单元格的值，可以通过这一属性修改单元格最终展示的值。

字体

字体指当前单元格的一些字体样式，比如字体大小，下划线、是否加粗等。

背景

背景指当前单元格的背景颜色或背景图片，可以在属性这里直接配置背景颜色或者上传背景图片，也可以在下方的条件编辑中写入背景色或者背景图的路径（图片路径可以通过fileId或者url去设置，二者选其一）。

背景颜色：

return {
  bgColor: {
    dataType: 'color',
    data: '#ffffff'
  }
};

背景图片：

return {
  bgColor: {
    dataType: 'image',
    data: {
      fileId: '', // 与 url 二选一
      url: '',
      mode: '100% 100%' // auto、100% 100% 或 cover
    }
  }
};

属性：

条件编辑：

背景颜色

有文件id的背景图片

有在线路径的背景图片

颜色

颜色指当前单元格的字体颜色。

单元格

单元格指报表中单元格的地址。支持新值中配置单元格，如果需要在条件表达式中使用单元格，格式为$$开头再加单元格的地址，如：$$A1, $$B2

行高

行高指当前单元格的高度。可以在属性中选择行高属性去配置当前行单元格的高度，也可以在条件属性中指定rowHeight的值，在返回的对象中设置该属性去覆盖上方行高属性的配置。

注意：包含【行高】/【列宽】的条件表达式不支持变量【$$pageInfo】、【$$rowsCount】

列宽

列宽指当前单元格的宽度。可以在属性中选择列宽属性去配置当前行单元格的宽度，也可以在条件编辑中指定colWidth的值，在返回的对象中设置该属性去覆盖上方列宽属性的配置。

注意：包含【行高】/【列宽】的条件表达式不支持变量【$$pageInfo】、【$$rowsCount】

边框

边框指的是当前单元格的四个边框。可以在属性中选择边框属性去配置当前单元格边框的颜色，也可以在条件编辑中指定border的值（可以分别设置四条边的边框样式跟颜色），在返回的对象中设置该属性去覆盖上方边框属性的配置。

内容显隐

指的是内容是否要显示隐藏，设置为true则表示单元格内容展示，设置为false则表示单元格内容隐藏。

单元格属性

其他

基本

不自动调整

当前单元格，展示以及打印导出时，以设计器中实际大小展示，单元格中的内容，截取显示

自动调整行高

当前单元格，设计器中的大小不足以摆放下全部文字时，展示以及打印导出时，将保持列宽不变，根据内容的多少，自动调整行高，显示全部内容。

高级

尾页独行隐藏

单元格设置了该属性，单元格所在行单独成页时，将隐藏该行。

示例：

如下报表模版配置情况：最后一行是空行，业务中用于分割两条不同的医嘱，实际场景中遇到了最后一条医嘱后的空行单独另起一页的情况，实际并不希望渲染空行，以节省纸张和打印耗材。对该空行的某个单元格设置上「尾页独行隐藏」来实现该效果

用Html显示内容

单元格设置了该属性，可以在单元格内容、条件属性中编写html格式的内容

示例：

比如需要在同一个单元格中实现多种文字颜色的效果，就可以使用html格式的内容来实现。

分页

行前分页
行后分页
列前分页
列后分页
分页时可断开（v0.8.0）
分页断开时值重复显示（v0.8.0）

选项	功能
行前分页	每页显示固定的行数后分页，在行前分页
列前分页	每页显示固定的列数后分页，在列前分页
行后分页	每页显示固定的行数后分页，在行后分页
列后分页	每页显示固定的列数后分页，在列后分页
分页时可以断开	分页可以断开
分页断开时值重复显示	分页断开后值重复显示

具体步骤见本章“按组分页”。

扩展属性

支持对特定单元格添加扩展属性，键入属性名和属性值即可存储在对应单元格中并支持对属性的增加和删除操作。

按组分页

按组分页就是让数据按组来进行分页显示，每个组的数据占据一页

例如报表原本是按照纸张大小进行分页的，现在希望能够按照采购计划，一个采购计划数据显示在同一个页面当中。

实现思路

在表尾单元格设置「行后分页」或者在表头后设置「行前分页」。

按组分页设置

如图在A4单元格上设置了行后分页，设计器中会出现绿色虚线的分割线

主子报表

嵌入式主子报表特点是在单元格中嵌入独立的报表模板，嵌入的模板称为「子报表」，嵌入子报表后的整体称为「主报表」。

各子报表格式可以不对齐，子表与主表的格式也可以不对齐，子报表能够获取主表中的值。

示例

新建普通报表，设计主表如下图所示：

注：根据实际情况调整行高列宽或合并单元格，否则只能显示部分数据。

点击「模板>作用域变量」，在主表中添加一个作用域变量

点击「工具栏>子报表」

维护子报表信息「报表编码」、「报表版本」、「参数」、「集成报表全局作用参数」、「自定撑开容器高度」配置

预览效果

关于「参数」、「集成报表全局作用参数」，如果未设置「参数」、「集成报表全局作用参数」子表将以自身的作用域参数为准，如果只打开「集成报表全局作用参数」，若主表有子表同名作用域参数主子表集成时子表将使用主表同名参数，若设置了「参数」，则在主子表集成时以设置的参数为准。

（参数优先级：子表配置中的「参数」> 打开「集成报表全局作用参数」时主表的同名作用域变量 > 子表作用域变量）

数据列过滤

添加过滤条件

绑定「数据列」单元格，如图C3，可在单元格元素设置中点击「数据过滤」编辑数据过滤条件/表达式。

选择当前数据集内的某一个字段，如图中「city」

选择对应的过滤判断匹配项，目前支持「基础类型数据」「数据列」「单元格」匹配类型对数据列数据进行匹配过滤。

如图，对符合「city」列的值等于字符串「杭州」的数据列进行了过滤。

注：当过滤单元格时，有父格和扩展的一些规则：

比如当前单元格需要过滤「A2」单元格

当前单元格（也就是设置过滤的数据列单元格）无父格时，此次过滤执行将找到整张表中所有「A2」及以「A2」作为扩展源的单元格；
当当前单元格（也就是设置过滤的数据列单元格）有父格时，此次过滤执行将找到当前单元格「父格」中所有「A2」及以「A2」作为扩展源的单元格；

复杂过滤条件

过滤条件可以组合使用 AND \ OR \ 括号配置复杂的过滤条件

如：下图的过滤条件为 city 等于“杭州” 并且 (name 包含 “张三” OR name 包含 “李四”)

也可以在括号内再添加括号，增加更复杂的过滤逻辑

注：添加括号操作（先选中一条，再按Ctrl键盘再选中，满足多条选中的情况下括号按钮激活）

超级链接

给单元格配置超级链接，在报表预览的时候，点击当前配置了超级链接的单元格，可以跳转到指定的页面或者执行一段配置好的javascript脚本。可配置的选项有「网页链接」「javascript脚本」。

超级链接列表

只支持配置一个网页链接，但是支持配置多个javascript脚本，如果已经有了一个网页链接，再点击创建的话会弹窗提示“只能设置一个网页链接”。

在超级链接列表中我们可以做复制、上移、下移、排序、删除、新增等操作。在预览的时候，执行的顺序是根据列表中的顺序，从上往下执行。

网页链接

配置网页链接我们需要配置url，链接在当前窗口打开、新窗口打开、当前页面对话框打开（v0.7.3新增），如果url需要携带参数，我们可以在下方参数配置区域进行配置。

参数可以是静态的也可以是动态的，动态的参数需要将参数值绑定给一个全局作用域变量。绑定方式是点击指定参数后面的文件夹按钮，弹出作用域配置弹窗，勾选一个已经配置好的全局作用域变量，如下图所示，a参数跟全局作用域中的a变量绑定：

参数可以是一个公式表达式执行后的值

例如：

参数1 是一个最简单默认的值

参数2是来源于当前报表的全局作用域值「test」

参数3是一个公式值，值为一个公式表达式执行后的值

javascript脚本

超级链接配置也可以是一段javascript脚本，如下图所示，配置了一段跳转到百度页面的脚本，当预览的时候，点击该单元格则会执行下方的脚本，跳转到百度页面：

动态参数

动态参数顾名思义参数值可以动态变化，点击超级链接后根据改变的参数值进而改变报表的展示效果

配置界面比较简单，添加参数和参数值即可。
可以配合报表里面的数据集参数和模板参数一起使用。
动态参数刷新会全局刷新。

添加一个动态参数

示例配置

配置全局作用域参数（配置参数 a 默认值 ASC 代表默认升序）

配置数据集查询sql

配置动态参数

完成配置

预览时配置动态参数的单元格点击“动态参数1”即可触发更新

网络报表

添加被链接报表的方式：直接打开报表模板。
内置三种打开链接的方式：新窗口、对话框。
支持超链时传递参数

配置示例

报表编码：报表标识
报表版本
打开方式：新窗口、对话框
当选择打开方式为对话框时，可配置对话框宽高、标题
参数配置

可按实际的业务场景配置链接报表的参数传递

例如：

参数1 是一个最简单默认的值

参数2是来源于当前报表的全局作用域值「test」

参数3是一个公式值，值为一个公式表达式执行后的值

集成报表全局作用域参数

当跳转报表需要继承当前报表的全局作用域参数值时勾选，默认勾选状态

浮动元素

浮动元素是指不是存储在单元格内，是浮动在报表上方的内容，通常用来设置报表的印章。浮动元素包括自定义内容跟浮动图片，自定义内容指可以通过配置html结构动态生成浮动元素内容，浮动图片是指可以通过上传一张图片，使该图片浮动在报表上方。

自定义内容

通过return返回需要展示的html内容结构，可以在脚本中使用$$scope, $$reportInfo等变量。浮动元素标题可以自定义，用来在设计器中区分不同的浮动元素。

脚本配置完成后点击确定，自定义浮动元素会默认插入到报表的左上角，可以自由拖动到需要放置的位置上去。也可以点击当前浮动元素右上角的菜单icon，弹出下拉框，做删除操作。还可以双击浮动元素重新弹出脚本编辑器，去做编辑操作。

浮动图片

点击选择图片按钮，选择一张图片上传，可以在左边看到预览图，右侧还可以设置图片的展示方式。

设置完成后点击确定，浮动图片会默认插入到报表的左上角，可以自由拖动到需要放置的位置上去。也可以点击当前浮动图片右上角的菜单icon，弹出下拉框，做删除操作。还可以双击浮动图片重新弹出图片编辑弹窗，去做编辑操作。

浮动图表

图表是一种将数据直观化、形象化、可视化的图形结构，使数据的差异对比和变化趋势变得一目了然，有助于快速、有效地表达数据关系。

整个图表的制作流程如下：1.数据准备；2.浮动元素下拉插入浮动图表；3.选择图表类型；4.定义图表数据；5.设置图表样式；6.预览图表

建议按“类型 → 数据来源 → 字段映射/汇总 → 筛选 → 样式”的顺序配置：

选择图表类型；切换类型后重新检查系列、坐标轴和标签是否仍适用。
选择数据来源：数据集、RPC 或单元格区域。
配置分类字段、数值字段、系列和汇总方式。
需要限制数据时增加筛选条件，并先确认筛选前有数据。
配置标题、图例、背景、绘图网格、标签、提示和坐标轴。
保存并预览，检查空数据、单系列、多系列和较长分类名称。

验证方法：先关闭筛选并使用最小数据集确认图表能显示，再逐项开启汇总、筛选和样式。图表空白时优先检查数据来源和字段类型，图例或坐标轴错位时再检查网格边距。

绘图网格说明：绘图网格控制图表实际绘图区与外框之间的上、下、左、右距离。标题、图例或坐标轴名称被遮挡时，应增大对应方向的网格边距；网格只影响布局，不改变数据。

图表类型

点击浮动元素选择浮动图表后，可见弹窗进行图表类型选择，当前已支持的图表类型有：饼图（基础饼图、等弧度玫瑰图、不等弧度玫瑰图）；柱形图（基础柱形图、堆积柱形图、百分比堆积柱形图）；条形图（基础条形图、堆积条形图、百分比堆积条形图）；折线图（基础折线图、堆积折线图）；面积图（基础面积图、堆积面积图、百分比堆积面积图）；散点图；

选择所需要的图表类型后，点击设计器中的图表，可在右侧配置面板中看到对应【悬浮元素的配置面板】，如图所示

如果当前图表不满足需求，需要切换不同的图表，也可在上图所示的【类型】tab下对图表进行切换，需要注意的是，在相同类型下切换不同形态图表时配置信息不会清空，但是图表类型切换时，由于配置信息存在差异，故当前图表的配置信息将会清空，重置为切换后的图表类型对应的配置信息。

图表数据

图表数据设置项包含两个方面，如下图所示：

1.数据来源：设置图表数据，必选设置项；

2.数据筛选：对图表分类和系列进行筛选，可选设置项；

散点图的数据与其他图表略有不同，主要体现在数据集数据上，相对其他图表更加简单，只要选择对应的系列名、x、y和值即可，因为不存在分类，所以数据筛选时只存在对系列数据的筛选，另外由于散点图通常用于现实和比较数值，所以散点图的分类轴和值轴都是数值，如下图所示

数据来源

数据来源有两种：「数据集数据」「rpc」(使用这两种数据源配置图表，本质上只有数据源方式的选择不同，其他配置都相同)。通过给「分类」、「系列名」及「系列值」选择数据集字段，来展示图表。

另外新增了一种数据来源：「单元格数据」，即「分类」、「系列名」及「系列值」等相关字段可以来源于报表中的单元格数据。

所有基础图表在设计器中展示时，均会提示「分类」和「系列」的位置，帮助用户理解每种图表分类和系列的区别。

以柱形图为例，模板中插入柱形图后，会以说明文字提示分类和系列所在位置，如下图所示：

数据集数据

当图表数据直接来源于数据集时，数据来源选择「数据集数据」，选择对应的数据集，再绑定图表数据即可。

绑定数据时，可以选择「字段值」或「字段名」作为「系列名」来定义图表。两者的区别在于面向的数据表结构不同。如下图所示：

注：数据库表中每一列称为一个字段，列名即为「字段名」，列中的记录即为「字段值」，「系列名」是图表的图例。

上述两张表用不同方法得出的图表是一致的，如下图所示：

注：具体配置示例在《bee-report动态报表使用示例》文档的第八个示例《图表报表》。

RPC 数据源

当图表数据直接来源于rpc接口时，数据来源选择「rpc」，点击配置按钮，去配置rpc的服务名、方法名、入参（默认是[])、出参过滤器（如果接口直接返回的数据不符合图表需要使用的数据结构，可以使用去二次处理接口返回的数据），配置完后点击确定按钮。

注：接口返回的数据，或者通过出参过滤器二次处理后的数据结构：是对象数组，并且键名相同，数据不能嵌套（对象里面套数组等），类似sql查询语句返回的数据结构。（如果不符合，点击确定按钮的时候会提示报错。）

单元格数据

如果图表要展示的数据不直接来源于数据集，需要将数据进行计算之后展示时，可以使用单元格数据源定义图表数据，如下所示

预览结果如下图所示：

注意事项：

1.分类、系列、值需要等获取到单元格父子格关系，例如分类是系列的父格，系列是值的父格

2.单元格数据使用公式进行二次计算时，例如$$count($$D2)，得到的值会失去单元格属性，即无法获取父子格关系，图表无法正常显示，若原始单元格时列表展示且结果顺序个数正好对应，则显示结果是正常的。

3.当前单元格数据仅支持键入单个单元格处理，若键入多个单元格表达式则会提示报错，如下

汇总方式

选择「值」后，可设置值字段的「汇总方式」，默认为「求和」，可设置为：首个、最后一个、求和、平均、最大值、最小值、个数。如下图所示：

数据筛选

数据筛选可对「分类」或「系列」分别进行筛选，分类和系列下的设置项均相同。如下图所示：

只使用前有限条记录

默认不勾选，勾选后，显示「记录条数」文本编辑框，输入数字 x ，表示只记录前 x 条数据。

合并剩余项为“其他”

勾选时，剩余分类或系列的数据汇总，分类名或系列名设置为「其他」；不勾选则剩余分类或系列不显示。

例如：设置数据筛选>分类，记录条数设置为 2，勾选「合并剩余项为“其他”」。效果如下图所示：

为空时不显示

分类为空时，不显示该分类：「分类为空」即指某个分类下的所有系列对应的值为空；
系列为空时，不显示该系列：「系列为空」即指某个系列对应的所有值为空；

注：勾选所有项目时，是先去除空数据再进行数据筛选和合并。例如：有 10 个系列，设置显示前 5 个，后 5 个合并“其他”，并勾选分类为空时，不显示该分类。若第 3 个分类为空，则此时是显示分类 1、2、4、5、6、其他。

形态

图表数据形态改变的是「分类」或「系列」名称的显示值，常用于改变分类或系列的单位。

形态设置分为“数据字典”和“公式形态”两种方式。数据字典的字段映射规则见本章“自定义单元格内容/形态 → 数据字典”。

公式形态

形态选择公式形态，点击公式配置按钮，弹出公式弹窗，输入相应的公式，分类或者系列会根据输入的公式做转化。（$$currentValue表示【分类】【系列】的值。）

图表样式

图表的通用样式共有7种，分别是：标题、图例、背景、标签、系列、提示、坐标轴。

图表标题

图表标题分为3个通用项设置，分别为内容、布局、样式。如下图所示

设置说明：

1.标题是否可见，默认为可见；

2.内容—文本：设置标题的显示内容，即标题的文本信息，可以直接在文本编辑框编辑标题文本；

3.布局—位置：调整标题的显示位置，可设置为左对齐、居中、居右，默认为居中；

4.样式—字符：可选择跟随主题和自定义两种，在自定义条件下，可设置字体、大小、颜色、倾斜、加粗。

图表图例

图表图例分为3个通用项设置，分别为布局、样式、显示策略。如下图所示

设置说明：

1.图例是否可见，默认为可见；

2.布局—位置：调整图例的显示位置，共有5个设置选项，分别为：靠上、靠下、靠左、靠右、右上，默认为靠上显示；

3.样式—字符：可选择跟随主题和自定义两种，在自定义条件下，可设置字体、大小、颜色、倾斜、加粗

4.显示策略—是否固定显示：主要指的是预览时的交互效果。未开启固定显示时，鼠标点击在图例或文字上，对应图表内容隐藏，点击后再次显示；开启固定显示后，则不存在点击图例或文字对应图表内容隐藏效果。

下图即为未开启固定显示时，点击图例或文字隐藏对应图表内容效果。

图表背景

图表背景分为2个通用配置项设置，分别为边框和背景。如下图所示

设置说明：

1.边框—线型：线型共可分为6种，即无、细实线、细虚线、点线、粗实线、粗虚线；

2.边框—颜色：设置边框颜色；

3.边框—圆角：设置四个角的角度；

4.背景—填充：可跟随主题或选择自定义填充颜色；

5.背景—不透明度：可设置背景透明度，设置值为 0-100%，0 表示完全透明，100% 表示完全不透明；

6.背景—阴影：可设置是否开启阴影效果，默认关闭；

上图所示的设置效果如下图所示：

绘图网格

用于设置绘图区距离外侧的边距和绘图区是否包含轴标签。（对于有坐标轴的图表有用）如下图所示：

设置说明：

1.边距—左边距：绘图区距离左侧边距；

2.边距—右边距：绘图区距离右侧边距；

3.边距—上边距：绘图区距离上侧边距；

4.边距—下边距：绘图区距离下侧边距；

5.选项—包含标签：绘图区是否包含轴标签；

图表标签

用于设置是否在图形中显示数据信息。图表标签因图表类型不同有所差异，下面以饼图标签为例做简单介绍。

饼图的标签分为两种标签，即值标签和分类标签，而柱形图、条形图以及折线图只有值标签的配置，对应的散点图这里时对x、y和值的配置。

设置说明：

1.标签是否可见，根据图表类型设置略有不同；

2.值标签—文本：标签文本通过勾选参数显示该参数对应数据，可以多选，基本包含分类名、系列名、值、百分比这四种；

3.值标签—字符：可选择跟随主题和自定义两种，在自定义条件下，可设置字体、大小、颜色、倾斜、加粗；

4.值标签—位置：标签显示在图形的什么位置；

5.值标签—文本方向：文本排列方向，选择纵向时文字旋转90°排列（柱形图）；

6.值标签—重叠调整：标签文字有重叠时，一定程度上错开文字（柱形图）；

5.分类标签—文本：标签文本通过勾选参数显示该参数对应数据，可以多选，可选分类名和汇总值；

6.分类标签—字符：可选择跟随主题和自定义两种，自定义条件下，可设置字体、大小、颜色、倾斜、加粗；

7.分类标签—位置：分类标签显示在图形的什么位置；

图表系列

可以通过该设置项改变图表系列的显示样式和风格，此处分图表类型进行简单介绍。

其中系列中【颜色】为通用配置项，提供已设置好的配色方案共5种，分别为康宁蓝、清朗蓝、健康绿、暖橙绿、木本棕，默认状态下设置为康宁蓝。

饼图
- 起始角度：设置整个饼图的起始角度，范围：0~360；
- 终结角度：设置整个饼图的终结角度，范围：0~360；
- 内径占比：将饼图设置成圆环效果，内径占比越大，圆环的内径越大，范围：0~100；
- 半径设置：设置饼图的半径大小，有自动和固定2种，固定模式下可以自定义数值；

柱形图、条形图
- 固定柱宽：点击「是」可以自定义固定柱宽，点击「否」则会自动调整；
- 系列间隔：设置系列之间的距离，可以是负的，负数时柱形会有叠加重合的部分；
- 分类间隔：设置分类之间的距离；

折线图
- 线
  - 线型：定义折线的类型，分实线和虚线两种；
  - 线宽：可自定义线宽大小，默认状态线宽为2；
  - 形态：设置线条的形状，分普通、垂直、曲线三种；
  - 空置断开：开启时数据为空的点连线断开；
- 标记点
  - 填充颜色：可选颜色自定义设置标记点颜色，默认跟随系列色；
  - 半径：标记点半径大小；

面积图
- 线
  - 线型：定义折线的类型，分实线和虚线两种；
  - 线宽：可自定义线宽大小，默认状态线宽为2；
  - 形态：设置线条的形状，分普通、垂直、曲线三种；
  - 空置断开：开启时数据为空的点连线断开；
- 标记点
  - 类型：标记点的形状；
  - 填充颜色：可选颜色自定义设置标记点颜色，默认跟随系列色；
  - 半径：标记点半径大小；
- 面积
  - 填充颜色：可选颜色自定义设置面积色，默认跟随系列色；
  - 不透明度：面积的透明度，默认15%；
散点图
- 标记点
  - 填充颜色：可选颜色自定义设置标记点颜色，默认跟随系列色；
  - 半径：标记点半径大小；

图表提示

当鼠标悬浮于图表的系列或分类之上时，系列或分类变为选中状态，且出现数据点提示。

设置说明：

1.标签是否可见，根据图表类型设置略有不同；

2.值标签—文本：标签文本通过勾选参数显示该参数对应数据，可以多选，基本包含分类名、系列名、值、百分比这四种，散点图则包含系列名、x、y、值；

3.值标签—字符：可选择跟随主题和自定义两种，在自定义条件下，可设置字体、大小、颜色、倾斜、加粗；

图表坐标轴

设置X轴和Y轴显示样式和风格，其中柱形图和折线图坐标轴配置相同，而条形图X、Y轴配置与前两者相反，由于散点图x轴和y轴均为数值，故散点图两轴配置相同，下面以柱形图和折线图为主进行简单介绍。

通用配置

X轴和Y轴通用的配置项主要有标题、标签、轴线样式、位置和格式5种

- **标题**
    * 轴标题是否显示，若显示则可自定义轴标题内容、轴标题位置及设置字符样式，默认隐藏；
    * 内容：可以直接在内容编辑框编辑标题文本；
    * 位置：可设置为左对齐、居中、居右，默认为居中；
    * 标题间距：可设置轴标题跟轴之间的距离。
    * 字符：默认跟随主题，可自定义字体、大小、颜色、倾斜、加粗；

- **标签**
    * 轴标签就是显示在坐标轴区域的文字，标签设置项用于自定义轴标签文本的样式；
    * 字符：默认跟随主题，可自定义字体、大小、颜色、倾斜、加粗；
    * 文本旋转：轴标签文本可根据需要设置旋转，旋转角度从-90°到90°，默认为0；

- **轴线样式**
    * 类型：坐标轴轴线类型共有7种，分别为无、直线（细、中、粗）、单侧箭头线（细、中、粗）；
    * 颜色：默认跟随主题，或自定义轴线颜色，<font style="color:#DF2A3F;">当轴标签字符颜色未选择自定义颜色时，若轴线颜色进行了自定义颜色，则轴标签字符颜色同轴线颜色</font>；
    * 主要刻度线：即轴线上对应于轴标签的主要刻度线；

- **位置**
    * 轴标签位置：可设置 X轴 和 Y轴 标签显示位置，X轴 默认在下方，Y轴 默认在左侧；
    * 轴逆序：若需要坐标轴倒序显示，则可开启轴逆序；

- **格式**
    * 设置轴标签格式 分通用和自定义两种；
    * 通用：可选择常规和数字两种方式，常规即默认展示轴标签文本，数字即可自定义显示数字格式；

    * 自定义：即可通过模板字符或函数形式定义轴标签显示，写法参照示例；

X轴配置
- 标签间隔显示
  - 轴标签显示方式有三种，分别是间隔显示、缩略显示、换行显示；
  - 间隔显示：后面的标签被前一个标签遮挡，则后面的标签就不显示，如此类推，直到遇到不会被遮挡的标签，则显示出来，所以标签过长时只显示部分标签。默认情况下即为间隔显示。
  - 缩略显示：轴标签超出一定宽度时，以省略号表示多余的部分。
  - 换行显示：轴标签超出一定宽度时自动换行显示。
  - 其中，若选择了缩略显示或换行显示，需要额外设置文本宽度，即超出这个文本宽度对文本进行缩略或换行

Y轴配置
- 值定义
  - 自定义最大值—坐标轴刻度最大值
  - 自定义最小值—坐标轴刻度最小值
  - 自定义主刻度单位—坐标轴主刻度单位（轴线样式主要刻度线开启时生效）
  - 自定义次刻度单位—坐标轴次刻度单位（轴线样式次要刻度线开启时生效）

数据设置

数据设置分为「分组」「列表」「汇总」。

分组

分组指数据列单元格设置扩展的时候，如果有数据相同的项则会合并展示，示例如下所示：

列表

列表值数据列单元格设置扩展的时候，不管数据是否相同，当前单元格有多少项数据就展示多少项。示例如下所示：

汇总

汇总指的是将当前单元格里的数据项进行一些简单的计算，有「求和」「平均」「最大值」「最小值」「个数」。示例如下所示：

单元格标识说明

过滤标记-黄色小三角（左下）

条件属性标识-红色小三角（左上）

形态标识-绿色小三角（左上）

单元格属性->尾页独行隐藏 - 蓝色小三角（左下）

行前/行后 分页-绿色小三角（右上）

列前/列后 分页-玫红色小三角（右上）

自定义单元格内容/形态

图片

二维码

条形码

斜线

公式

数据字典

单元格背景图片设置

单元格扩展设置

扩展方向

横向

纵向

不扩展

父格设置

横向左父格

纵向上父格

延伸设置

纵向可伸展

横向可伸展

扩展后排序

单元格条件渲染

支持多条件

单元格表达式

JavaScript 语法表达式

返回具体表达式逻辑将在运行时执行

作用域注入

报表基础信息

当前单元格信息

全局作用域信息

表达式响应

当前值

字体

背景

颜色

单元格

行高

列宽

边框

内容显隐

单元格属性

其他

基本

高级

分页

扩展属性

按组分页

实现思路

按组分页设置

主子报表

示例

数据列过滤

添加过滤条件

复杂过滤条件

超级链接

超级链接列表

网页链接

javascript脚本

动态参数

添加一个动态参数

示例配置

网络报表

配置示例

浮动元素

自定义内容

浮动图片

浮动图表

图表类型

图表数据

数据来源

数据集数据

RPC 数据源

单元格数据

汇总方式

行前/行后分页-绿色小三角（右上）

列前/列后分页-玫红色小三角（右上）