echart拓扑图实现过程

清疚 2023-01-09 12:52 336阅读 0赞

##### 看效果 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 4]  
链接地址：[官方地址][Link 1]，[echart][]  
实现源码：

> 首先说一下，实现这个过程很简单，不过坑还是有一些的，今天主要就是说一下这些坑，上面的图是我实现的结果

let topology = res.data.items
                            let X = 200
                            let Y = 200
                            let dataSource = [{ 
    							                name: '节点1',
    							                x: 300,
    							                y: 300
    							            }, { 
    							                name: '节点2',
    							                x: 800,
    							                y: 300
    							            }, { 
    							                name: '节点3',
    							                x: 550,
    							                y: 100
    							            }, { 
    							                name: '节点4',
    							                x: 550,
    							                y: 500
    							            }],
    						let links = [{ 
    							                source: 0,
    							                target: 1,
    							                symbolSize: [5, 20],
    							                label: { 
    							                    show: true
    							                },
    							                lineStyle: { 
    							                    width: 5,
    							                    curveness: 0.2
    							                }
    							            }, { 
    							                source: '节点2',
    							                target: '节点1',
    							                label: { 
    							                    show: true
    							                },
    							                lineStyle: { 
    							                    curveness: 0.2
    							                }
    							            }, { 
    							                source: '节点1',
    							                target: '节点3'
    							            }, { 
    							                source: '节点2',
    							                target: '节点3'
    							            }, { 
    							                source: '节点2',
    							                target: '节点4'
    							            }, { 
    							                source: '节点1',
    							                target: '节点4'
    							            }],
    
                            let option = { 
                                title: { 
                                    text: this.title
                                },
                                tooltip: { 
                                    //show: true,
                                    //enterable: true,//鼠标是否可进入提示框浮层中
                                    formatter: formatterHover,//修改鼠标悬停显示的内容
                                },
                                legend: [{ 
                                    data: dataSource.map(function (a) { 
                                        return a.name;
                                    })
                                }],
                                series: [
                                    { 
                                        type: 'graph',
                                        layout: 'none', //none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置.'circular' 采用环形布局，'force' 采用力引导布局。
                                        symbolSize: 50,
                                        //categories: dataSource, //是否显示图例
                                        focusNodeAdjacency: true,  //鼠标放置上去 显示当前的连接
                                        draggable: true, //是否支持拖拽 只有layout 为 force 的时候才可以用
                                        roam: true, //是否支持拖动和缩放
                                        animation: true, //是否需要加载
                                        animationDurationUpdate: 5000,//加载动画时间
                                        animationEasingUpdate: 'backIn',//动画类型
                                        label: { 
                                            normal: { 
                                                show: true,//是否显示标签。
                                                position: 'bottom',//标签的位置。['50%', '50%'] [x,y] 'inside'
                                                textStyle: {  //标签的字体样式
                                                    color: '#3489ff', //字体颜色
                                                    fontStyle: 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                                                    fontWeight: 'bolder',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                                                    fontFamily: 'sans-serif', //文字的字体系列
                                                    fontSize: 12, //字体大小
                                                }
                                            },
                                        },
                                        itemStyle: { 
                                            borderColor: '#fff',
                                            borderWidth: 1,
                                            shadowBlur: 10,
                                            shadowColor: 'rgba(0, 0, 0, 0.3)'
                                        },
                                        edgeSymbol: ['none', 'arrow'],
                                        data: dataSource,
                                        links: links,
                                        lineStyle: { 
                                            opacity: 0.9,
                                            width: 2,
                                            curveness: 0,
                                            color: '#000000'
                                        },
                                        emphasis: { 
                                            lineStyle: { 
                                                width: 6
                                            }
                                        }
                                    }
                                ],
                                markPoint: { },
                            };
                            function formatterHover(params) { 
                                let currData = params.data
                                if (params.dataType === 'node') { 
                                //鼠标到节点
                                    return currData.name
                                } else { 
                                //鼠标到线条
                                    return currData.name
                                }
                            }
                            currTopology.setOption(option)

> 注意的点1：  
> 如果使用的是canvas进行绘制的，那么我们的tooltip不显示，解决方案是将canvas改为div就可以了

<div id="canvas"
                             style="background-color: #FFFFFF;width:1920px ;height:600px" ref="topology"></div>

> 注意的点2:  
> formatterHover 该函数需要写到我们的方法中，function定义，然后进行html的构建。

> 注意的点3:具体怎么引入的echart，我之前的博客中有写到，npm install就可以了。

具体说我一个月没有更新博客了，也没啥解释的了，都是我的问题，关于这个拓扑图实现过程中有什么问题，可以私信我，或者下面评论！看到了我都会回复的！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]: /images/20221119/11d0f35861dc41b890f0e542c7839396.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 1]: /images/20221119/e2506c18c2ac4f088e251f63f0bb36c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 2]: /images/20221119/a516ed34d77e4f588d79dc2d8ac5e158.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 3]: /images/20221119/32c7a886cff8433c94a725ab472d2477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70 4]: /images/20221119/2c12adf0ba364bea9c5ae37d0e964cd2.png
[Link 1]: https://www.makeapie.com/editor.html?c=xCLEj67T3H
[echart]: https://echarts.apache.org/zh/api.html#action.graph.focusNodeAdjacency