How to use geographic coordinate with Echarts graph? - graph

Question

I'm trying to use a geographic coordinate with Echarts graph. For example, the graph example given on the website are as follows: [here is the example link about the graph][1]
[![example graph][2]][2]
the data format is as follows:
{
"nodes":[
{
"id":"0",
"name":"Myriel",
"symbolSize":19.12381,
"x":-266.82776,
"y":299.6904,
"value":28.685715,
"category":0
},
{
"id":"1",
"name":"Napoleon",
"symbolSize":2.6666666666666665,
"x":-418.08344,
"y":446.8853,
"value":4,
"category":0
}],
"links":[
{
"source":"1",
"target":"0"
},
{
"source":"2",
"target":"0"
}]}
The document says I can use geographic coordinate with geoIndex to assign the corresponding geographic coordinate components.So I constructed my own graph data which is as follows:
tmp = {
"nodes":[
{
"id":0,
"name":"A",
"x":106.715912,
"y":29.510934,
"value":2.7493110918413546,
"category":0
},
{
"id":1,
"name":"B",
"x":106.375811,
"y":29.242566,
"value":2.4366801109834597,
"category":1
},
{
"id":2,
"name":"C",
"x":106.628127,
"y":29.318595,
"value":1.0339437768234796,
"category":1
},
{
"id":3,
"name":"D",
"x":106.297996,
"y":29.512318,
"value":0.7788528349157652,
"category":0
}
],
"links":[
{
"source":"0",
"target":"1"
},
{
"source":"0",
"target":"2"
},
{
"source":"1",
"target":"2"
},
{
"source":"1",
"target":"3"
}
],
"categories":[
{
"name":"SectionA"
},
{
"name":"SectionB"
}
]
};
Then, I add the corresponding attribute coordinateSystem:'geo'，while it does not work. When I comment out this line，it shows like as follows. However, the positional relationship between these points is not as shown in the figure.
[![my graph][3]][3]
So,
[1]: https://echarts.apache.org/examples/zh/editor.html?c=graph
[2]: https://i.stack.imgur.com/gVQeP.png
[3]: https://i.stack.imgur.com/iDNty.png