Echarts关系图的配置项,一文全解,一目了然。

embedded/2024/10/18 20:19:40/

一、什么是关系图

ECharts 是一个由百度开发的开源可视化库,用于创建丰富的交互式数据可视化图表。关系图(Relationship Graph)是 ECharts 中的一种图表类型,用于展示节点之间的关系和连接。

关系图通常用于展示复杂的网络结构,比如社交网络中的好友关系、组织结构中的人员关系、物流网络中的节点连接等。关系图由节点和边组成,节点代表网络中的实体,边代表节点之间的连接关系。


二、关系图特性

ECharts 的关系图支持以下特性:

1. 自定义节点样式:可以根据实际需求自定义节点的样式、大小、颜色等,使节点能够直观地展示不同的属性。

2. 自定义边样式:可以自定义边的样式、粗细、颜色等,以突出不同的关系类型。

3. 交互性:支持用户交互操作,比如点击节点展开详细信息、拖拽节点改变布局等。

4. 大规模数据支持:能够处理大规模的节点和边,保持流畅的交互体验。

通过 ECharts 的关系图,用户可以直观地了解复杂网络结构中的关系和连接,帮助用户更好地理解和分析数据。


三、关系图配置项(1)

ECharts 中的关系图(Relationship Graph)提供了丰富的配置项,用于定制节点、边、布局等各个方面的样式和行为。以下是一些常见的关系图的配置项:

1. 节点配置项:

  • - symbol: 节点的图形类型,如圆形、方形、三角形等。
  • - symbolSize: 节点的大小。
  • - itemStyle: 节点的样式,包括颜色、边框等。
  • - label: 节点的标签配置,可以设置显示文本、字体样式等。
  • - emphasis: 鼠标悬停时节点的高亮样式配置。

2. 边配置项:

  • - lineStyle: 边的样式,包括颜色、粗细等。
  • - label: 边的标签配置,可以设置显示文本、字体样式等。
  • - emphasis: 鼠标悬停时边的高亮样式配置。

3. 布局配置项:

  • - layout: 布局算法的选择,如力导向布局、圆形布局等。
  • - force: 力导向布局的相关参数配置,如斥力、引力等。
  • - circular: 圆形布局的相关参数配置,如半径、起始角度等。

4. 交互配置项:

  • - draggable: 是否允许节点拖拽。
  • - focusNodeAdjacency: 是否在鼠标悬停时突出显示与该节点相连的边和节点。

以上只是一部分关系图的配置项,ECharts 的关系图支持的配置项非常丰富,可以根据实际需求进行定制化配置,以实现各种复杂的关系图可视化效果。


四、关系图配置项(2)

5. 数据配置项:

  • - nodes: 节点数据数组,包括节点的 id、name、value 等属性。
  • - links: 边数据数组,定义节点之间的连接关系,包括源节点和目标节点的 id。

6. 动画配置项:

  • - animation: 是否开启动画效果,以及动画的持续时间、缓动效果等设置。

7. 视觉映射配置项:

  • - visualMap: 可视化映射配置,用于将数据映射到节点和边的视觉属性,如颜色、大小等。

8. 图例配置项:

  • - legend: 图例配置,用于展示节点和边的含义和颜色对应关系。

9. 标签配置项:

  • - labelLayout: 标签的布局方式,如平行于边、垂直于边等。
  • - edgeLabel: 边的标签配置,可以设置显示文本、字体样式等。

10. 其他配置项:

  • - roam: 是否开启缩放和平移操作。
  • - tooltip: 提示框的配置,可以设置显示内容、格式化等。

这些配置项可以帮助用户实现对关系图的各个方面进行高度定制,以满足不同场景下的需求。ECharts 的关系图提供了丰富的配置选项,使用户能够灵活地定制出符合自己需求的关系图可视化效果。

Hi,我是贝格前端工场,10年前端和UI老司机了,持续为大家分享有价值、有见地的观点、作品、干货,欢迎评论、关注、点赞、有需求的老铁,可私信。


http://www.ppmy.cn/embedded/30965.html

相关文章

spring ioc 容器加载过程 refresh() 方法详解

IOC 加载过程 从 new ClassPathXmlApplicationContext开始 ApplicationContext context new ClassPathXmlApplicationContext("classpath:application.xml");ClassPathXmlApplicationContext类构造方法 public ClassPathXmlApplicationContext(String[] configLo…

Luminar开始为沃尔沃生产下一代激光雷达传感器

在自动驾驶技术的浪潮中,激光雷达(LiDAR)传感器以其高精度和强大的环境感知能力,逐渐成为了该领域的技术之星。Luminar(路安达)公司作为自动驾驶技术的领军企业,近日宣布已开始为沃尔沃汽车生产…

可视化大屏应用场景:智慧安防,保驾护航

hello,我是大千UI工场,本篇分享智慧安防的大屏设计,关注我们,学习N多UI干货,有设计需求,我们也可以接单。 实时监控与预警 可视化大屏可以将安防系统中的监控画面、报警信息、传感器数据等实时展示在大屏上…

RWKV 1/2/3/4/5/6

RWKV: RNNs Strike Back RNN / LSTM / GRU LSTM在RNN的基础上,引入Gate门控机制,将前一token的信息和当前token的信息进行加权,来缓解长距离token遗忘问题。但仍然无法根本的解决长程遗忘。 GRU将LSTM的4个门控,缩减到了3个门控&…

开源AI智能名片商城小程序:深度解读IMC(IP、MarTech、Content)视角

在数字化浪潮中,私域流量的运营已成为企业不可或缺的增长引擎。而开源AI智能名片商城小程序,则是以一种全新的视角——IMC(IP、MarTech、Content),为企业打开私域流量运营的新篇章。今天,我们就来一起深入解…

广东开放大学2024春《公司金融(本)》形成性考核一二三四五参考答案

电大搜题 多的用不完的题库,支持文字、图片搜题,包含国家开放大学、广东开放大学、超星等等多个平台题库,考试作业必备神器。 公众号 答案:更多答案,请关注【电大搜题】微信公众号 答案:更多答案&#…

Docker容器:数据管理与镜像的创建(主要基于Dockerfile)

目录 一、Docker 数据管理 1、数据卷(Data Volumes) 2、数据卷容器(DataVolumes Containers) 二、容器互联(使用centos镜像) 三、Docker 镜像的创建 1、基于现有镜像创建 2、基于本地模板创建 3、基…

opencv_22_图像卷积操作

void blur_demo(Mat& image); void ColorInvert::blur_demo(Mat& image) { Mat dst; blur(image, dst, Size(13, 13), Point(-1, -1)); imshow("图像模糊", dst); }