看效果
链接地址：官方地址，echart 实现源码：
代码语言：javascript复制首先说一下，实现这个过程很简单，不过坑还是有一些的，今天主要就是说一下这些坑，上面的图是我实现的结果
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)代码语言：javascript复制注意的点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就可以了。
具体说我一个月没有更新博客了，也没啥解释的了，都是我的问题，关于这个拓扑图实现过程中有什么问题，可以私信我，或者下面评论！看到了我都会回复的！
