如何强制ECharts力导向图布局固定，不随节点数值修改发生变化

问题根源：ECharts 力导向图默认在每次调用setOption更新数据时，都会重新运行力导向仿真计算节点位置，仅设置初始布局无法阻止更新时的布局重算。

你可以通过以下两种方案实现修改节点数值时布局保持固定：

方案1：首次渲染后固定节点坐标（最稳妥） #

1. 首次渲染图表后，获取所有节点的最终坐标，写入节点数据中
2. 后续更新数据时将layout属性设为none，直接使用写入的坐标渲染，不会重新计算布局
   示例代码片段：

// 首次渲染完成后获取坐标
myChart.on('finished', () => {
  const seriesModel = myChart.getModel().getSeries()[0]
  const nodeData = seriesModel.getData()
  graph.nodes.forEach((node, idx) => {
    const layout = nodeData.getItemLayout(idx)
    node.x = layout[0]
    node.y = layout[1]
  })
  // 关闭finished事件监听，避免重复触发
  myChart.off('finished')
})

// 后续更新节点数值时的配置
myChart.setOption({
  visualMap: {
    min: newMin,
    max: newMax
  },
  series: [{
    layout: 'none', // 固定使用已保存的节点坐标
    data: graph.nodes
  }]
})

方案2：禁用力导向迭代（配置更简单） #

直接修改初始option的力导向配置，让力导向仿真首次计算后就停止迭代，后续更新不会触发布局重算：

series: [{
  type: 'graph',
  layout: 'force',
  force: {
    initLayout: 'circular',
    friction: 1, // 摩擦力设为最大值，迭代一次后直接停止
    gravity: 0, // 关闭重力影响
    repulsion: 100, // 保持固定斥力值，不要随数值变化
    layoutAnimation: false // 关闭布局更新动画
  },
  // 其余原有配置保持不变
}]

修改后你只需要更新节点的value值和visualMap的最值即可，布局不会发生变化。

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