Drawing a Topology

[tzhou2018]

What problem does this feature solve?

A common requirement in the engineering field is to map out topologies (network topologies, data acquisition nodes, and cluster topologies). In the current popular vue, you can't directly use echarts to draw the required topology. It is not very good to use some external libraries (jToto). I hope that in the near future, we can use echarts to draw beautiful jTopo.

What does the proposed API look like?

A common requirement in the engineering field is to map out topologies (network topologies, data acquisition nodes, and cluster topologies). In the current popular vue, you can't directly use echarts to draw the required topology. It is not very good to use some external libraries (jtoto). I hope that in the near future, we can use echarts to draw beautiful topo.

[yufeng04]

I think this would be a nice feature to have.

[Ovilia]

What about graph charts? Are there anything else you need apart from that?

[elnipa]

Any updates on this issue? I am trying to realize something similar to the screenshots below with nodes having ports that are connected to other ports. I would also love an option to have svg images as background for different nodes and an option to cluster nodes in expandable groups.

[plainheart]

I suppose that you could do this generally through the map series or geo coordinate system component with a customized map type based on SVG.

Related issue: #4537 (in Chinese)

Step1: Register a customized map by the ECharts API echarts.registerMap

Unfortunately, this usage seems not to be listed in the documentation. Maybe it's just forgotten or imperfect yet?

// use jQuery to fetch the svg document
$.get('football.svg', function (svgDocument) {
 // register a football map
  echarts.registerMap('football', {
     svg: svgDocument
  }
}

Step2: Use the customized map base on SVG in map series or geo component

see the option series-map.map and the option geo.map

series: [{
type: 'map',
map: 'football'
}]

The result likes the screenshot (in Chinese)

[13764188896]

但这个问题在 vue中依然存在， 在vue中即使使用jquery 获取到 svgDocument ，或通过转化得到 svgDocument, echarts.registerMap('football', { svg: svgDocument }

这一步依然不起作用， svg底图显示不出来，试了很多方法都不行

不使用vue 没问题， 测试了三四个都这样

[Mercle-Liang]

Any updates on this issue? I am trying to realize something similar to the screenshots below with nodes having ports that are connected to other ports. I would also love an option to have svg images as background for different nodes and an option to cluster nodes in expandable groups.

Wish support like this feature.