问题现象:
使用的是echarts是 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
使用echarts关系图的layout: "none"布局,当修改节点数据们中最小或最大的x或y值时,整个图表移动。
问题分析:(可能的原因)
关系图图表不是典型的二维图表,没有坐标轴,当然可以通过
xAxis: {
show: true,
type: 'value',
min: 0,
max: 1000,
axisLabel: {
show: true,
inside: true
}
},
显示坐标轴,及设定具体的坐标范围,但是并不会对节点数据中的x,y产生固定定位的效果。
所以关系图表不接受坐标轴,但是当使用x,y自定义节点位置布局时,效果就类似常规二维图表没有设定坐标轴,由echarts内部根据节点数据中最大最小x,y生成坐标轴,对外不可见。所以当修改节点数据中最值的坐标时,坐标轴就会随之改变,其他节点位置也会改变。
实践效果:
不显式设置坐标轴,改变数据集最值
data: [15, 23, 22, 21, 13, 14, 300],
data: [15, 23, 22, 21, 13, 14, 30],
可以看到图表容器大小没有发生变化,但是随着data中最值改变,其他节点的位置也发生变化。类似关系图中节点间互相影响的问题。
解决方法:
在data中设置几个basepoint定位在图表4个角,固定住图表的坐标尺寸。x,y的范围可根据自己的节点坐标单位确定。或者先给定basepoint的x,y范围,然后再范围中决定节点的坐标们
{
"name": "lefttop",
"target": null,
//可以根据basepoint不同的type在option.serise的data中设置symbolSize:0不予显示
"type": "basepoint",
"x": 0,
"y": 0
},
{
"name": "leftbottom",
"target": null,
"type": "basepoint",
"x": 0,
"y": 550
},
{
"name": "righttop",
"target": null,
"type": "basepoint",
"x": 960,
"y": 0
},
{
"name": "rightbottom",
"target": null,
"type": "basepoint",
"x": 960,
"y": 550
},
以上述basepoint为例,只要节点坐标0<x<960,0<y<550。那么节点的修改都不会改变坐标轴大小范围,也不会引起其他节点位置变化。
其他
不确定是不是其他原因
或者其他解决方案
或者官方专业方式
快速得到定位后的坐标可以见echarts关系图批量导出想要的坐标节点
更新:echarts提供了关系图中的二维坐标
关系图二维坐标