antv的G6横向的流程图如何在手机端做竖向展示

AntV G6是一款强大的JavaScript数据可视化库，它提供了一个交互式的图形系统用于创建各种图表。对于横向流程图要在手机端竖向展示，你可以考虑以下几个步骤：

1. **适应屏幕方向**：首先，你需要确保你的应用能够检测设备的屏幕方向，并相应地调整布局。这通常通过CSS媒体查询(`@media screen and (orientation: landscape)`) 或者 JavaScript 的 window.orientation API 来完成。

2. **修改布局**：针对竖向模式，你可以重构G6的布局算法，使其适用于更窄的屏幕宽度。你可以选择将流程图从水平排列改为垂直排列，比如让每个节点沿着一条直线上下排列，而不是左右排列。

3. **调整视口**：当用户切换到竖向模式时，可以动态改变`viewport`属性，设置新的宽度为较小的高度，以便图表占据整个屏幕高度。

4. **缩放和平移**：为了保证在小屏幕上依然有良好的用户体验，需要调整缩放和平移功能，让用户能方便地查看全部流程。

5. **触控优化**：针对触摸操作，确保按钮、链接和节点的点击区域足够大，以避免误操作。

// 示例代码（假设有一个名为graph的G6实例）
const isPortrait = window.innerWidth < window.innerHeight;
if (isPortrait) {
  graph.setViewport({ width: '100%', height: 'auto', minZoom: 0.5 });
}

// 当屏幕方向变化时更新布局
window.addEventListener('resize', () => {
  const newOrientation = window.orientation === 180 ? 'portrait' : 'landscape';
  if (newOrientation !== currentOrientation) {
    // 更新布局逻辑...
    currentOrientation = newOrientation;
  }
});