?ECharts是一款数据可视化图表库,因为其拥有多种多样的图表样式,炫酷的展示效果,并有个性化的定制的能力,所有有很多BI产品比如Smartbi会选择集成Echart图形以便进行可视化图表的制作。
文章图片
文章图片
今天我们给大家具体来讲述一种Echarts图形——关系图的制作。
【可视化图形制作之关系图】关系图是什么
关系图是指使用图形和连线表示节点与节点(人物或是事物)之间关系的一类图。下图是一个关系图示例,展示人物之间的关系。每个节点的颜色表示他们的类型,圆圈大小表示每个人的声望大小,圆圈越大,声望越大。
文章图片
关系图怎么做
下面我们就以上图乔布斯的人物关系图为例来演示如何实现关系图。
数据要求
一个关系线需要五个数据:连线的目标和源,用于标识目标和源的类型及大小,目标和源的关系。本示例采用了northwind数据源内的t_gxt表,表的结构和数据如下图:
文章图片
实现步骤
- 在Smartbi中打开即席查询选择northwind数据源内的t_gxt表,勾选需要的字段。
- 在即席查询工具栏中选择 图形 选项。
文章图片
- 进入Echarts作图界面,图形类型选择 关系图。源节点选择字段"人物A";目标节点选择字段"人物B";关系名称(是指节点之间的关系描述,比如父子)可以不选择。
文章图片
- 分别点击源节点字段和目标节点字段后面的设置,则进行数据点分类和数据点数值的设置。
数据点数值:用于显示点的大小比例范围。其数值大小以图形大小为标识,数据越大表示越重要。
数据点人物A设置如下图:
文章图片
数据点人物B设置如下图:
文章图片
4、设置显示图例,图例在图形上方显示。图例是取分类的值。
文章图片
5、设置图形主题
文章图片
6、切换到序列设置。
设置显示方式为“力引导布局”;连接曲率为0.5;斥力因子为600;勾选拖拽;勾选显示数据项标签;数据点大小为40;
文章图片
文章图片
文章图片
7、点击确定,查看效果:
文章图片
推荐阅读
- 人脸识别|【人脸识别系列】| 实现自动化妆
- 人工智能|干货!人体姿态估计与运动预测
- 推荐系统论文进阶|CTR预估 论文精读(十一)--Deep Interest Evolution Network(DIEN)
- Python专栏|数据分析的常规流程
- 历史上的今天|【历史上的今天】2 月 16 日(世界上第一个 BBS 诞生;中国计算机教育开端;IBM 机器人赢得智能竞赛)
- 网络|一文彻底搞懂前端监控
- 游戏|2022年如何学习前端前沿技术,破卷而出()
- 分布式|《Python3网络爬虫开发实战(第二版)》内容介绍