Apache Echarts v5中地图与Graph系列的坐标及缩放同步问题求助

针对你遇到的两个核心问题，直接给出修改方案和关键说明：

核心问题分析与修复点 #

1. 坐标同步失效（设置coordinateSystem: 'geo'后Graph不渲染） #

当Graph关联geo坐标系时，不能用x/y字段定位，必须改用lon（经度）和lat（纬度）字段；同时要明确指定geoIndex绑定到目标geo组件。

2. 缩放/平移不同步 #

不要给Graph单独开roam，应该把roam: true放到geo配置中——geo是所有关联系列的统一坐标系容器，所有绑定该geo的系列（Graph、Map）会自动同步其缩放、平移操作。

修改后的完整代码 #

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('fullMap', geoJson);
  myChart.setOption({
    legend: {
      data: [
        { name: 'One' },
        { name: 'Two' },
        { name: 'Three' }
      ],
      bottom: '25',
      itemHeight: '10',
      textStyle: { fontSize: '10' },
      type: 'scroll'
    },
    geo: [
      {
        map: 'fullMap',
        layoutSize: '100%',
        geoIndex: 0,
        roam: true // 把roam移到geo，统一控制缩放平移
      }
    ],
    series: [
      {
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'geo', // 绑定geo坐标系
        geoIndex: 0, // 指定关联的geo组件索引
        lineStyle: {
          color: 'source',
          curveness: 1e-21
        },
        data: [
          {
            id: 'A',
            name: 'A',
            category: 0,
            lon: 51.8954823121139, // 替换x为lon（经度）
            lat: 0.918566971127893, // 替换y为lat（纬度）
            symbol: 'rect'
          },
          {
            id: 'B',
            name: 'B',
            category: 0,
            lon: 52.0742496381072,
            lat: 1.22603740005249,
            symbol: 'rect'
          },
          {
            id: 'C',
            name: 'C',
            category: 0,
            lon: 52.8723466202309,
            lat: -0.192814484661784,
            symbol: 'rect'
          },
          {
            id: 'D',
            name: 'D',
            category: 0,
            lon: 53.3688011059499,
            lat: 0.0024000083847046,
            symbol: 'rect'
          }
        ],
        links: [
          { source: 'A', target: 'B' },
          { source: 'B', target: 'C' }
        ],
        categories: [
          { name: 'One' },
          { name: 'Two' },
          { name: 'Three' }
        ]
      },
      {
        type: 'map',
        map: 'fullMap',
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        geoIndex: 0 // 绑定到同一个geo组件
      }
    ]
  });
});

关键修改说明 #

1. 统一坐标系控制：将roam: true移至geo配置，让geo成为缩放平移的统一入口，Graph和Map系列会自动同步该状态。
2. Graph绑定geo：添加coordinateSystem: 'geo'和geoIndex: 0，明确Graph使用geo的坐标系。
3. 坐标字段修正：把Graph数据中的x/y替换为lon/lat，这是geo坐标系识别的标准经纬度字段，确保节点能正确映射到地图上的对应位置。
4. 移除冗余配置：Map系列的boundingCoords可以移除，因为geo组件已经基于注册的地图数据处理了范围；同时移除Graph的roam，避免冲突。

内容的提问来源于stack exchange，提问作者Carlos Isidoro López