如何设置ECharts关系图缩放后完整显示且居中于视口

问题说明 #

在ECharts graphGL GPU力导向布局官方示例中，给系列配置初始zoom: 0.1，想要缩小视图完整展示全量关系图时，会出现图表整体偏移、没有渲染在视口中心的问题。

原因 #

graphGL的GPU力导向布局初始化时，会自动计算所有节点的包围盒，执行一次默认的缩放适配逻辑。如果仅单独在系列配置中写死zoom值，会和内置的自适应缩放逻辑冲突，中心点坐标没有同步对齐画布中心，就会出现偏移。

解决方案 #

• 配置项静态修复（适合固定数据场景）
  在graphGL系列配置中，除了设置目标zoom值，同步显式指定中心点坐标，同时给力导布局配置也加上默认中心参数，覆盖内置的偏移计算，核心配置如下：

  series: [{
    type: 'graphGL',
    layout: 'force',
    zoom: 0.1, // 目标初始缩放值
    center: [0, 0], // 强制系列视图中心对齐画布原点
    forceAtlas2: {
      center: [0, 0], // 力导布局计算时以原点为中心
      zoom: 1, // 关闭布局层的自动缩放
      // 其余原有力导配置不变
    },
    // 其余节点、边等原有配置不变
  }]
  

• API动态适配（适合动态数据、节点数量不固定场景）
  监听图表的渲染完成事件，在首次力导布局计算完成后，主动触发缩放动作，以画布正中心为缩放原点设置目标缩放值，代码如下：

  // 图表初始化完成后绑定事件
  myChart.on('finished', function setInitialZoom() {
    myChart.dispatchAction({
      type: 'graphGLRoam',
      zoom: 0.1,
      // 以画布宽高的一半作为缩放原点，即正中心
      originX: myChart.getWidth() / 2,
      originY: myChart.getHeight() / 2
    })
    // 只需要首次加载执行一次，执行完解绑事件
    myChart.off('finished', setInitialZoom)
  })
  

提示：如果设置后仍有微小偏移，可以微调center参数的xy值，一般节点分布极不均匀的场景才需要额外调整。

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