在apache echarts中同步地图和图表系列

Question

我正在使用 Apache Echarts v5，我正在尝试实现一个具有世界地图背景的图表。

为此，我知道最好的选择是使用“图形”系列和“地图”系列，两者都从基于 geoJSON 或世界地图的“地理”配置中读取，我从这里下载了它。然而我很难弄清楚如何做这两件事：

1. 同步坐标，因此图形的元素始终位于地图的正确位置。
2. 能够同时放大或缩小图表和地图。

为此，我准备了一个最小的例子来说明我正在做的事情。这段代码可以直接粘贴到任何echarts在线示例中，它应该可以工作（我使用其他geoJson进行模型）。

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('fullMap', geoJson);
  myChart.setOption(
    option = {
      legend: {
        data: [
          {
            name: 'One',
          },
          {
            name: 'Two',
          },
          {
            name: 'Three',
          },
        ],
        bottom: '25',
        itemHeight: '10',
        textStyle: {
          fontSize: '10',
        },
        type: 'scroll',
      },
      geo: [
        {
          map: 'fullMap',
          layoutSize: '100%',
          geoIndex: 0,
        },
      ],
      series: [
        {
          type: 'graph',
          layout: 'none',
          roam: true,
          lineStyle: {
            color: 'source',
            curveness: 1e-21,
          },
          data: [
            {
              id: 'A',
              name: 'A',
              category: 0,
              x: 51.8954823121139,
              y: 0.918566971127893,
              symbol: 'rect',
            },
            {
              id: 'B',
              name: 'B',
              category: 0,
              x: 52.0742496381072,
              y: 1.22603740005249,
              symbol: 'rect',
            },
            {
              id: 'C',
              name: 'C',
              category: 0,
              x: 52.8723466202309,
              y: -0.192814484661784,
              symbol: 'rect',
            },
            {
              id: 'D',
              name: 'D',
              category: 0,
              x: 53.3688011059499,
              y: 0.0024000083847046,
              symbol: 'rect',
            },
          ],

          links: [
            {
              source: 'A',
              target: 'B',
            },
            {
              source: 'B',
              target: 'C',
            },
          ],
          categories: [
            {
              name: 'One',
            },
            {
              name: 'Two',
            },
            {
              name: 'Three',
            },
          ],
        },
        {
          map: 'fullMap',
          type: 'map',
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          boundingCoords: [
            [-180, 90],
            [180, -90],
          ],
          geoIndex: 0
        },
      ],
    })
});

问题是，如果我尝试将图形系列的“坐标系统”设置为“geo”，图形将停止渲染，并且当前缩放仅适用于图形，而不适用于地图。此外，我已将地图设置为遵循“boundingCoords”坐标，但我在图表系列中没有看到相同的设置。

文档对此不是很清楚，因此我们将不胜感激。

Answer 1

地图上的图表

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('fullMap', geoJson);
  myChart.setOption(
    (option = {
      legend: {
        bottom: '25',
        itemHeight: '10',
        textStyle: {
          fontSize: '10'
        },
        type: 'scroll'
      },
      geo: [
        {
          map: 'fullMap'
        }
      ],
      series: [
        {
          type: 'graph',
          coordinateSystem: 'geo',
          roam: true,
          lineStyle: {
            width: 3,
            curveness: 0.2
          },
          data: [
            {
              name: 'A',
              category: 0,
              value: [114.14, 22.28, 80],
              symbol: 'rect'
            },
            {
              name: 'B',
              category: 0,
              value: [114.14, 22.48, 80],
              symbol: 'rect'
            },
            {
              name: 'C',
              category: 1,
              value: [113.94, 22.28, 80],
              symbol: 'rect'
            },
            {
              name: 'D',
              category: 2,
              value: [114.44, 22.28, 80],
              symbol: 'rect'
            }
          ],
          links: [
            {
              source: 'A',
              target: 'B'
            },
            {
              source: 'B',
              target: 'C'
            }
          ],
          categories: [
            {
              name: 'One'
            },
            {
              name: 'Two'
            },
            {
              name: 'Three'
            }
          ]
        }
      ]
    })
  );
});

Answer 2

虽然@ned的答案似乎有效，但对我来说理解起来并不简单。因为它没有任何解释。

我认为这是关键点：

1. 前提条件是必须注册地图。
2. 地图必须是 JSON，以库为例：

{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:OGC:1.3:CRS84"}},"features":[{"geometry":{"type":"Polygon","coordinates":[[[47.97822265625001,7.
...

3. 必须使用

   geo

   键在选项的顶层声明地图，使用

   map

   键选择地图：

options = {
...
      geo: [
        {
          map: 'world',

4. 如果您希望能够移动地图，请添加键

   roam

   ：

      geo: [
        {
          map: 'world',
          roam: true,

5. 现在要在图表上绘制数据，它必须位于顶级键

   series

   下方。使用

   coordianteSystem

   键设置轴，与直觉相反，您不使用

   x

   、

   y

   ，而是使用

   value

   键和坐标数组：

options = {
...
     series: [
        {
          type: 'graph',
          coordinateSystem: 'geo',
          layout: 'none',
          data: this.graphData.nodes?.map(n => {
            return {
              ...
              name: n.name,
              value: [n.x, n.y],
              ...
              },
            };
          }),

6. 坐标的图形数据必须位于

   Latitude Decimal Degrees

   和

   Longitude Decimal Degrees

   中。