ECharts图中节点与连线间距设置及拖拽同步问题求助

问题分析 #

你用两个graph series实现了节点和连接线的间距效果，但两个series都开启roam: true后，拖拽时节点和连接线无法同步移动——这是因为两个series的数据是独立维护的，拖拽操作只会触发当前series的坐标更新，另一个series的坐标不会自动同步。

解决方法 #

只保留上层节点series的roam能力，关闭下层连接线series的roam，然后通过监听ECharts的graphroam事件，实时将上层节点的坐标同步到下层series的data中，实现拖拽同步。

修改后的完整代码 #

// 初始化图表
const myChart = echarts.init(document.getElementById('main'));

let option = {
  series: [
    {
      type: 'graph',
      symbolSize: 70,
      roam: true, // 仅给上层节点series开启roam
      label: {show: true},
      itemStyle: {
        color: '#fff',
        borderWidth: 1,
        borderColor: 'black'
      },
      data: [
        {name: 'A', x: 0, y: 0},
        {name: 'B', x: 10, y: 0},
        {name: 'C', x: 5, y: 7}
      ]
    },
    {
      type: 'graph',
      silent: true,
      roam: false, // 关闭下层连接线series的roam
      symbolSize: 100,
      itemStyle: {
        color: '#fff'
      },
      z: 0,
      edgeSymbol: ['none', 'arrow'],
      lineStyle:{
        color: '#000000',
        curveness: 0.2,
        width: 3,
      },
      data: [
        {name: 'A', x: 0, y: 0},
        {name: 'B', x: 10, y: 0},
        {name: 'C', x: 5, y: 7}
      ],
      links: [
        {source: 'A', target: 'B', lineStyle: {curveness: -0.2}},
        {source: 'A', target: 'C'},
        {source: 'B', target: 'C'},
        {source: 'C', target: 'A'}
      ]
    }
  ]
};

myChart.setOption(option);

// 监听graphroam事件，同步节点坐标到下层series
myChart.on('graphroam', function() {
  // 获取上层节点series的最新坐标数据
  const latestNodeData = myChart.getOption().series[0].data;
  // 更新下层连接线series的节点坐标
  myChart.setOption({
    series: [
      {},
      {
        data: latestNodeData.map(item => ({
          name: item.name,
          x: item.x,
          y: item.y
        }))
      }
    ]
  });
});

关键说明 #

• 仅让上层节点series响应拖拽操作，下层连接线series关闭roam避免独立交互。
• 通过graphroam事件监听拖拽、缩放等操作，实时同步上层节点的最新坐标到下层series，确保连接线始终跟随节点位置变化。
• 下层series的silent: true避免干扰上层交互，z: 0保证它在节点下方不遮挡节点。

内容的提问来源于stack exchange，提问作者Bekir Kaplan