首页 前端知识 echarts关系图自定义节点坐标相互影响的问题

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

2024-08-10 22:08:37 前端知识 前端哥 541 643 我要收藏

问题现象:

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15259.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!