7.5 图表

单元格插入图表

a. 选中报表单元格，切换顶部TAB页到“插入”，可以看到“图表”选项。

b. 单击“图表”选项，系统将弹出新图表向导，在此向导中定义图表，如下图所示：

选择图表类型

UniEAP Report提供多种图表类型，每个类型包含若干子类型图表。请根据业务需求来选择对应的图表类型。在图表向导中选择图表的类型及其对应的子类型，如下图所示：

设置图表数据

不同的图表，数据设置方式略有不同。如下以柱状图为例，图表数据包括数据值、分类轴、图例三部分，可以应用报表公式获取数据，如list、select、cell等。

【注意】分类轴数据点、图例颜色和数据值上的数据点在数量上应该一致，否则，将会抛出数据点长度不等的异常。

以多系列柱图具体有两种情况，当图表为单系列时，只需要在“数据值”绑定数值集合、“分类轴”绑定分类数据。
首先，使用group与get公式（不限于此公式），定义a1，b1，c1单元格

然后，使用cell公式绑定单元格数据到图表

最后，预览页面如下

当图表为多系列时，这里提供两种数据绑定方式，用户可以根据数据的格式进行合理的选择。一种是对于冗余数据格式的绑定方式，另一种是非冗余数据格式的绑定，具体如下：

a. 冗余数据格式的方式：“图例”绑定系列数据，“分类轴”绑定分类数据，“数据值”绑定数据值。

b. 非冗余数据格式的方式：“图例”不需要绑定，“数据值”绑定多组数据用于对应多个系列；“分类轴”绑定分类数据。

两种绑定方式，对应不同的数据集结构，最终的图表形式是一致的。

图表配色

图表配置有两种方式，一种是使用报表主题配色方式，也是图表默认的配色方式；另一种是为图表设置自身主题，支持不与报表主题相同。

下面看介绍一下图表的两种主题配色方式

图表默认配色

切换顶部TAB页到“报表设置”，点击该栏目下的“主题”选项。

点击“添加主题”，选择“图表设置”可以看到图表相关的颜色选项。

包括如下属性配置：

• 背景色：图表区域的背景色
• 文本色：图表中所有文字的颜色，包括轴标签，图例，提示框等
• 轴线色：x轴，y轴，分割线，极坐标轴等
• 提示框背景：提示框或者叫做ooltip的背景色
• 分类色：条形图，饼图，折线图，散点图，关系图，标签云，仪表盘，流图，百分比等图表取分类色
• 序列色：地图，地理热力图，热力图，3D图等图表取序列色

图表保持自身主题

选择“主题设置”Tab页，显示如下页面

勾选“开启图表独立主题” ，然后选择想要设置的主题，右侧预览应用主题后的样式，如下图所示

设置完成后，点击“确定按钮”即可。

图表跳转

用户可以点击图表触发页面跳转。
选中图表所在单元格，切换顶部TAB页到“插入”，点击该栏目下的“超链接”，在弹出框中选中“跳转报表”。

选择需要跳转的目标报表，“B页面”

选择目标页的出现方式

如果目标页有参数的话可以传参，两个步骤：
1.点击提取报表参数
2.选择当前图表中与目标页参数绑定的字段

这样配置后，点击图表时会将字段值传给目标页进行过滤，如下图

图表联动

用户可以点击某个图表联动页面中的其他图表，下面以柱图举例。
此功能依赖于“参数”。首先创建一个参数，参数标识为“p2”

创建两个图表，“A图表”依赖数据集“ds1”，“B图表”依赖数据集“ds2”

其中，数据集“ds2”中包含参数“p2”，作为被联动的参数

“A图表”绑定“产品类型”在分类轴，以此作为联动的值

为“A图表”添加联动，单击选中“A图表”所在单元格，切换顶部TAB页到“插入”，点击该栏目下的“超链接”再选中“联动图表”，两个步骤：
1.选中被联动图表所在单元格，这里是“A5”
2.添加被联动的“图表B”所使用的参数并绑定到当前图表值，这里将参数“p2”绑定到“产品类型”
这里也可以点击“添加单元格”，添加更多被联动的图表。

“B图表”绑定“产品名称”在分类轴，也可以改变被联动时的绑定设置

至此联动配置已完成，播放页面联动前如下图

点击“A图表”中“家用电器”这根柱，“B图表”被联动后如下图

【注意】可以在“A图表”中点击切换不同柱，但不能取消联动，如果数据绑定更换，则被联动时数据绑定设置也需要更改。

图表属性设置

图表属性页包含了图表展现时一些基本属性设置，如下图所示：

包括如下常用属性配置：

• 标题；
• 提示框；
• 图例；
• 坐标系网格；
• X轴；
• Y轴；
• 详细属性；

图表属性介绍

标题

设置图表显示时的标题，可设置的属性如下：

提示框

设置图表提示框：

可自定义提示框显示内容：

其中的“城市”, “订单数据” 来自数据绑定步骤。尖括号“<>”中的名称要与数据绑定一致，其他文字可以自由编辑。

图例

设置图表图例：

坐标系网络

配置图表的边距，单位为px：

X轴

x轴的相关属性：

Y轴

y轴的相关属性：

详细属性

对于ECharts组件，在详细属性中可以灵活添加更多的属性

可参考ECharts官方文档