关于在VUE中使用echarts的拓扑图表（或关系图表type：graph）进行自定义节点数量、排序等。

最新推荐文章于 2025-05-31 09:24:58 发布

这BUG我就不改！

最新推荐文章于 2025-05-31 09:24:58 发布

阅读量1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue echarts 文章标签： echarts 前端 javascript 拓扑学 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_57246783/article/details/143055778

需求：根据后端返回的人物特性（2条）、不足之处（1条）、自动伸出节点，并且固定住优秀、人物特性、不足之处这三个节点的xy轴坐标，并且已知人物特性最多展示5个分支、不足之处最多展示5个分支，共计13个节点。

提示：这种echarts这种拓扑图的弊端就是他的ai自动排序功能布局效果非常差，只能根据固定的数量去进行提前定位好xy轴显示在什么位置、其次另外一个缺点就是这个只适用于你知道他会展示多少条数据，如果你的数据量非常庞大，那只好去看jsplumb这种功能强大的框架。

一、代码：

1、第一步先准备好渲染echarts的容器，如果要根据我的xy轴去显示位置的话，container容器的盒子为宽700像素、高350像素，这里为了方便大家我直接写style

<div style="width: 700px; height: 350px" id="container"></div>

2、第二步先拿到后端返回的数据，根据他的数据拼成以下数组dataArray（节点）和linksArray（连线），linksArray中的source和target是节点数组中的索引值，如果你想用第一个节点连接第二个节点的话那么linksArray中的对象就要让source为0、target为1；那么假设现在你拿到的数据为以下这个样子，下列数据结合图片一展示的数据

this.dataArray = [
    {
        name: '党性修养(优)',
        category: 1,
        x: -320,
        y: -100,
        draggable: true,
        symbol:'image://' + require('../../../../static/images/humanResource/kk.png')
    },
    {
		name: '理想信念(优)',
		category: 1,
		x: -400,
		y: 50,
		symbol:'image://' + require('../../../../static/images/humanResource/kk.png')
    },
    {
		name: '党性修养(缺)',
		category: 1,
		x: 380,
		y: -70,
		symbol:'image://' + require('../../../../static/images/humanResource/kk.png')
    },
	{
	    name: '一般',
	    category: 1,
		x: -200,
		y: 40,
		symbolSize: [85, 85],
		symbol:'image://' + require('../../../../static/images/humanResource/bg-1-2.png')
	},
	{
		name: '缺点',
		category: 1,
		x: 170,
		y: 80,
		symbolSize: [85, 85],
		symbol:'image://' + require('../../../../static/images/humanResource/bg-1-3.png')