页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。
评论: Migration of unmigrated content due to installation of a new plugin

Title_font
Name概要说明

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

关系图是指使用图形和连线表示节点与节点(人物或是事物)之间关系的一类图。

下图是一个关系图示例,展示人物之间的关系。每个节点的颜色表示他们的类型,圆圈大小表示每个人的声望大小,圆圈越大,声望越大。

Title_font_1
Name关系图的特点说明如下:

优势:适合难以用语言和表格表达的关系。 

劣势:适用情况单一。 

数据要求:一个关系线需要五个数据:连线的目标和源,用于标识目标和源的类型及大小,目标和源的关系。

适用场景:主要用于表示复杂的关系。




面板
borderColor#FFFFFF
bgColor#F0F0F0
borderWidth1
borderStylesolid

目录


Title_font
Name实现方案

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

业务情景描述:展示乔布斯的人物关系。

数据结构 :本示例采用了northwind数据源内的t_gxt

注意
Echarts图形可以在即席查询、透视分析、电子表格中添加,操作步骤基本一致,本示例使用即席查询来演示。


实现步骤

1、在即席查询工具栏中选择 图形 选项

2、进入Echarts作图界面,图形类型选择 关系图

源节点选择字段"人物A";目标节点选择字段"人物B";关系名称(是指节点之间的关系描述,比如父子)可以不选择。

3、分别点击源节点字段和目标节点字段后面的设置,则进行数据点分类数据点数值的设置。

  • 数据点分类:是根据此节点进行分类,作为图例可显示出来分类,以不同颜色标识
  • 数据点数值:用于显示点的大小比例范围。其数值大小以图形大小为标识,数据越大表示越重要。

数据点人物A设置如下图:

数据点人物B设置如下图:

4、设置显示图例,图例在图形上方显示。图例是取分类的值。

5、设置图形主题

6、切换到序列设置。

设置显示方式为“力引导布局”;连接曲率为0.5;斥力因子为600;勾选拖拽;勾选显示数据项标签;数据点大小为40;

设置项功能
显示方式关系图显示样式,目前有两种,环形布局力引导布局
连接曲率设置数据节点之间线条的曲度,默认为直线,即0。
斥力因子数据节点之间线条的长度,会根据此因子进行计算。
拖动设置数据节点是否允许拖拽
数据项标签设置是否显示数据标签
数据点大小用于设置数据节点的半径大小


7、点击确定,查看效果:

资源下载

报表资源:乔布斯关系图.xml

表结构数据:t_gxt.sql


Title_font
Name属性

Wiki 标记
{html}<div style="border-bottom: 0.5px solid #dfe1e5;color:#2D5C8C;padding-bottom: 0.5px;font-size: 24px; height: 5px;">&nbsp;</div>{html}

关系图的属性包括数据设置、基本设置、标题、图例、提示、工具、序列、高级、扩展属性等,具体请参考下面表格: