如何获取Apache ECharts force布局后的节点坐标以解决拖拽复位问题？

实现步骤 #

1. 初始化带Force布局的图表
   先配置基础的关系图，开启节点拖拽并设置Force布局参数：

   const myChart = echarts.init(document.getElementById('main'));
   let chartOption = {
       series: [{
           type: 'graph',
           layout: 'force',
           draggable: true,
           force: {
               repulsion: 400,
               gravity: 0.2
               // 其他Force布局配置项
           },
           data: [
               { name: '节点A' },
               { name: '节点B' },
               // 更多节点数据
           ],
           links: [
               { source: '节点A', target: '节点B' },
               // 更多边数据
           ]
       }]
   };
   myChart.setOption(chartOption);
   

2. 监听布局完成事件获取节点坐标
   利用ECharts的finished事件，在Force布局计算完成后提取节点坐标，切换为none布局并更新节点数据：

   myChart.on('finished', () => {
       // 获取当前系列的数据集实例
       const seriesData = myChart.getModel().getSeries()[0].getData();
       const updatedNodes = [];
       
       // 遍历所有节点，提取布局坐标并保留原有数据
       seriesData.each(nodeIndex => {
           const nodeLayout = seriesData.getItemLayout(nodeIndex);
           updatedNodes.push({
               ...chartOption.series[0].data[nodeIndex],
               x: nodeLayout.x,
               y: nodeLayout.y
           });
       });
       
       // 更新配置：切换布局为none，替换节点数据
       chartOption.series[0].layout = 'none';
       chartOption.series[0].data = updatedNodes;
       myChart.setOption(chartOption);
   });
   

关键细节说明 #

• finished事件会在Force布局完全计算完毕、图表渲染完成后触发，此时获取的坐标是布局稳定后的最终位置。
• getItemLayout(nodeIndex)方法可以拿到对应节点的x、y坐标，这是Force布局计算后的实际渲染位置。
• 切换为none布局后，ECharts不会再自动计算节点位置，拖拽后的节点坐标会被保留。

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