echart拓扑图实现过程

看效果

链接地址：官方地址，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就可以了

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

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

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

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