图表基本概念

1 图表定义方式

下面以定义柱形图为例,介绍具体图表定义方式。

1.1 单元格插入图表

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

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

1.2 选择图表类型

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

1.3 设置图表数据

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

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

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

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

最后,预览页面如下
6

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

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

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

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

此话题在《第2章 图表最佳实践》有详细展开。

1.4 图表配色

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

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

1.4.1 图表默认配色

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

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

包括如下属性配置:

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

1.4.1 图表保持自身主题

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

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

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

1.5 图表跳转

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

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

选择目标页的出现方式
003

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

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

1.6 图表联动

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

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

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

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

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

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

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

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

【注意】可以在“A图表”中点击切换不同柱,但不能取消联动。

1.7 图表属性设置

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

12

包括如下常用属性配置:

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

2 图表属性介绍

2.1 标题

设置图表显示时的标题,可设置的属性如下:
13

2.2 提示框

设置图表提示框:
14

可自定义提示框显示内容:
14
其中的“城市”, “订单数据” 来自数据绑定步骤。尖括号“<>”中的名称要与数据绑定一致,其他文字可以自由编辑。

2.3 图例

设置图表图例:
15

2.4 坐标系网络

配置图表的边距,单位为px:
16

2.5 X轴

x轴的相关属性:
17

2.6 Y轴

y轴的相关属性:
18

2.7 详细属性

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

可参考ECharts官方文档

results matching ""

    No results matching ""

    results matching ""

      No results matching ""