【前端工具】使用Echats生成关系图谱，可展开折叠

最新推荐文章于 2026-06-19 09:03:20 发布

原创

最新推荐文章于 2026-06-19 09:03:20 发布 · 置顶 · 3.7k 阅读

本文展示了如何在Echarts中创建自定义的关系图谱，因官方示例不满足需求，作者结合网上资源编写了自己的实现，包括默认展示所有路径列表以及点击展开详细信息的功能。示例包含了源码数据，包括节点和链接信息。

一、需求背景与效果

二、echarts源码

一、需求背景与效果

根据服务关系制作关系图谱，echarts官方关系图没有想要的案例，网上也没有好的效果，故参考网上已有的部分案例，自行写了一个，效果还不错。

当前echarts版本信息：

话不多说，直接上效果：

1、默认展示查询到的所有路径列表

2、点击路径，可展开详细信息

二、echarts源码

源码与案例数据：

let data = {
  nodes: [{
		"cNumber": 20207,
		"category": 0,
		"name": "custom/data/service1-aliyun/vault-activemq"
	}, {
		"cNumber": 20207,
		"category": 1,
		"name": "service1-aliyun"
	}, {
		"cNumber": 2248,
		"category": 2,
		"name": "192.168.44.73"
	}, {
		"cNumber": 2247,
		"category": 2,
		"name": "192.168.44.76"
	}, {
		"cNumber": 2247,
		"category": 2,
		"name": "192.168.48.186"
	}, {
		"cNumber": 2246,
		"category": 2,
		"name": "192.168.44.77"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.44.74"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.44.75"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.48.184"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.48.187"
	}, {
		"cNumber": 2243,
		"category": 2,
		"name": "192.168.48.185"
	}, {
		"cNumber": 9743,
		"category": 0,
		"name": "cloud/data/devops-service1/tencent-service2"
	}, {
		"cNumber": 9743,
		"category": 1,
		"name": "devops-service1"
	}, {
		"cNumber": 2244,
		"category": 2,
		"name": "192.168.129.172"
	}, {
		"cNumber": 1893,
		"category": 2,
		"name": "192.168.0.117"
	}, {
		"cNumber": 1844,
		"category": 2,
		"name": "192.168.6.149"
	}, {
		"cNumber": 3869,
		"category": 0,
		"name": "custom/data/service1-tencent/vault-activemq"
	}, {
		"cNumber": 3869,
		"category": 1,
		"name": "service1-tencent"
	}, {
		"cNumber": 1926,
		"category": 2,
		"name": "192.169.35.217"
	}, {
		"cNumber": 150,
		"category": 2,
		"name": "192.169.32.2"

标签