ECharts是一款数据可视化图表库，因为其拥有多种多样的图表样式，炫酷的展示效果，并有个性化的定制的能力，所有有很多BI产品比如Smartbi会选择集成Echart图形以便进行可视化图表的制作。

可视化图形制作之关系图201.png

可视化图形制作之关系图203.png

今天我们给大家具体来讲述一种Echarts图形——关系图的制作。

关系图是什么

关系图是指使用图形和连线表示节点与节点（人物或是事物）之间关系的一类图。下图是一个关系图示例，展示人物之间的关系。每个节点的颜色表示他们的类型，圆圈大小表示每个人的声望大小，圆圈越大，声望越大。

可视化图形制作之关系图345.png

关系图怎么做

下面我们就以上图乔布斯的人物关系图为例来演示如何实现关系图。

数据要求

一个关系线需要五个数据：连线的目标和源，用于标识目标和源的类型及大小，目标和源的关系。本示例采用了northwind数据源内的t_gxt表，表的结构和数据如下图：

可视化图形制作之关系图473.png

实现步骤

1. 在Smartbi中打开即席查询选择northwind数据源内的t_gxt表，勾选需要的字段。

2. 在即席查询工具栏中选择图形选项。

可视化图形制作之关系图546.png

3. 进入Echarts作图界面，图形类型选择关系图。源节点选择字段"人物A"；目标节点选择字段"人物B"；关系名称（是指节点之间的关系描述，比如父子）可以不选择。

可视化图形制作之关系图629.png

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

数据点分类：是根据此节点进行分类，作为图例可显示出来分类，以不同颜色标识。

数据点数值：用于显示点的大小比例范围。其数值大小以图形大小为标识，数据越大表示越重要。

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

可视化图形制作之关系图767.png

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

可视化图形制作之关系图782.png

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

可视化图形制作之关系图813.png

5、设置图形主题

可视化图形制作之关系图824.png

6、切换到序列设置。

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

表格.png

可视化图形制作之关系图1051.png

可视化图形制作之关系图1053.png

7、点击确定，查看效果：

可视化图形制作之关系图1068.png

最近Smartbi在麦粉社区举办了一个「数据可视化作品大比拼」活动，不仅能够秀出自己的数据可视化能力，赢取千元大奖；还能和全国各地的数据分析师切磋交流，提升数据技能。感兴趣的小伙伴都可以去参与一下，听说，参赛就能获得社区麦豆奖励噢~
数据可视化作品大比拼：https://bbs.smartbi.com.cn/thread-2837-1-1.html

ITPub博客

可视化图形制作之关系图

最新文章