1

I am using Apache Echarts v5, and I am trying to implement a graph with a world map background.

For this, I understand the best choice is to use a "graph" serie and a "map" serie, both reading from a "geo" configuration, based in a geoJSON or the world map, which I downloaded from here. Yet I am having a hard time figuring how to do this two things:

  1. Sync coordinates, so the elements of the graph are always in the correct places of the map.
  2. Be able to zoom in are out both the graph and the map at the same time.

For this I have prepared a minimal example of what I am doing. This code can be directly pasted into any echarts online example and it should work (I used other geoJson for mockup).

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
        },
      ],
    })
});

The thing is, if I try to set the "coordinateSystem" for the graph serie to "geo", the graph stops rendering, and currently the zoom only works for the graph, not the map. Moreover, I have set my map to follow coordinates with "boundingCoords", but I do not see that same setting in the graph serie.

The documentation is not very clear about this, so any help would be appreciated.

Olaf Kock
  • 46,930
  • 8
  • 59
  • 90
Carlos Isidoro López
  • 383
  • 1
  • 2
  • 17

1 Answers1

0

graph on map

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'
            }
          ]
        }
      ]
    })
  );
});
ned
  • 383
  • 2
  • 9