使用echarts制作拓扑图

使用echarts制作拓扑图

1.首先是设置option，设置基本属性。

this.option = {
            title: {
                text: '',
            },
            tooltip:{}, 
            // animationDurationUpdate: 10,
            // animationEasingUpdate: 'quinticInOut',
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
                return idx * 1;
            },
            grid: {       
                y: '0',
                y2: '0',
                x: '0',
                x2: '0'
            },
            xAxis: {
                type: 'value',
                position: 'top',
            },
            yAxis: {
                inverse: true,
                type: 'value',
            },
            silent: true,
            series : [
                {
                    type: 'graph',
                    layout: 'none',
                    symbolSize: 50,            
                    roam: true,                
                    focusNodeAdjacency:true,   
                    label: {
                        normal: {
                            show: true,       
                            position:'top',
                            fontSize:20
                        }
                    },
                    legend: {  
                        left: 'left',  
                        data:['h1','h2', 'h3']  
                    },
                    edgeSymbol: ['circle', 'circle'],
                    edgeSymbolSize: [1, 1],   
                    edgeLabel: {
                        normal:{
                            show:false
                        },
                        emphasis: {
                            textStyle: {
                                fontSize: 20   
                            }
                        }
                    },
                    animationDelay: function (idx) {
                       return idx * 300;
                    },
                    force: {
                        edgeLength: 5,
                        repulsion: 20,
                        gravity: 0.2
                    },
                    //节点信息
                    data: [],
                    links: [],
                    lineStyle: {
                        normal: {
                            show:true,
                            color: {       
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0, color: 'red'
                                    }
                                    ,{
                                        offset: 1, color: 'blue' 
                                    }
                                ],
                                globalCoord: false
                            },     
                        },
                        emphasis:{
                            color:'red',
                            width:3,
                            type:'dashed',
                        }
                    },      
                    tooltip: {
                        position:'bottom',                      
                        backgroundColor:'green',
                        textStyle:{
                            fontSize:18,
                        }
                    }
                }
            ]
        };
    this.option.series[0].data = this.nodes;
    this.option.series[0].links = this.links;
    this.myChart.setOption(this.option);

设置option，然后setOption即可。
在制作的过程中，还是遇到了一些问题，比如因为需要给拓扑图的每个node的设置了一个id，先给已知节点设置了id，然后根据后台传过来的数据再重新设置id，此时，拓扑图上的节点的连线全部消失了。及时links的数据仍在。后来查其原因，就是因为之前设置了id，之后又改变了id，才造成了node与links之间‘失联’了。所以，echarts里面要慎用id这个属性。

1. 设置节点为指定图片

nodes: [
    {
        {
              name:'1',
              value: 0,
              label: {
                    normal: {
                          show: true,
                          position: 'bottom',
                          fontSize: '12'
                   }
              },
              symbol: 'image://http://oow60tecr.bkt.clouddn.com/firewall.png',
              symbolSize: [40, 40],
              x:300,
              y:120
        }
    }
]

节点设置成类似上面的形式即可。主要是设置image，我之前用的是本地图片，用的相对路径，一直是404，最后换成了远程地址图片。
部分效果图如下：