echarts关系图自定义节点坐标相互影响的问题

问题现象:

使用的是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提供了关系图中的二维坐标
在这里插入图片描述
关系图二维坐标

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨灰ash2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值