C/C++教程
echarts 下 用关系图实现拓扑图结构（树形，星型，网状，总线，环形）
本文主要是介绍echarts 下 用关系图实现拓扑图结构（树形，星型，网状，总线，环形），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
树形
网状
环形
星形
总线形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./dist/echarts.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="width: 100vw;height: 100vh;"></div>
<script>
var data_busNodes = JSON.parse('[{ "id": "bus_0", "name": "bus_0", "value": "0", "x": 1, "y": 1, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_1", "name": "bus_1", "value": "1", "x": 300, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_2", "name": "bus_2", "value": "2", "x": 50000, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_3", "name": "bus_3", "value": "3", "x": 700, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_4", "name": "bus_4", "value": "4", "x": 900, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_5", "name": "bus_5", "value": "5", "x": 1100, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_6", "name": "bus_6", "value": "6", "x": 1300, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_7", "name": "bus_7", "value": "7", "x": 1500, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_8", "name": "bus_8", "value": "8", "x": 1700, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_9", "name": "bus_9", "value": "9", "x": 1900, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_10", "name": "bus_10", "value": "10", "x": 2100, "y": 100, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_11", "name": "bus_11", "value": "11", "x": 1800, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_12", "name": "bus_12", "value": "12", "x": 1600, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_13", "name": "bus_13", "value": "13", "x": 1400, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_14", "name": "bus_14", "value": "14", "x": 1200, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_15", "name": "bus_15", "value": "15", "x": 1000, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_16", "name": "bus_16", "value": "16", "x": 800, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_17", "name": "bus_17", "value": "17", "x": 600, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_18", "name": "bus_18", "value": "18", "x": 400, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }, { "id": "bus_19", "name": "bus_19", "value": "19", "x": 200, "y": 400, "label": { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }, "symbol": "image://http:a.png" }]')
var params = [{
id: 43,
groupId: 5,
entityName: '',
entityId: '',
entityDeviceId: 137,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 44,
groupId: 5,
entityName: "003航母全-007",
entityId: 137,
entityDeviceId: 138,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 52,
groupId: 5,
entityName: "003航母全-007",
entityId: 137,
entityDeviceId: 144,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 45,
groupId: 5,
entityName: "003航母全-007",
entityId: 137,
entityDeviceId: 139,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 46,
groupId: 5,
entityName: "003航母全-007",
entityId: 139,
entityDeviceId: 140,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 47,
groupId: 5,
entityName: "003航母全-007",
entityId: 139,
entityDeviceId: 141,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 48,
groupId: 5,
entityName: "003航母全-007",
entityId: 141,
entityDeviceId: 142,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 49,
groupId: 5,
entityName: "003航母全-007",
entityId: 141,
entityDeviceId: 143,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 50,
groupId: 5,
entityName: "003航母全-007",
entityId: 138,
entityDeviceId: 144,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}, {
id: 51,
groupId: 5,
entityName: "003航母全-007",
entityId: 138,
entityDeviceId: 145,
deviceParam: '{"nodeType":""}',
deviceName: "歼-15T舰载作战飞机-006"
}]
function createBusNodeDatas(data_nodes, o) {
var num = data_nodes.length
var nodeLen = 0
var dataNodes = []
var dataLinks = []
var mockBus = []
// 制作data假节点xy
for (i = 0; i < num; i++) {
var x
var y
if (i > num / 2) {
x = o.x + (num - i) * 200
y = o.y + 400
} else {
x = o.x + i * 200 + 100
y = o.y + 100
}
data_nodes[i].x = x
data_nodes[i].y = y
dataNodes.push(data_nodes[i])
nodeLen++
}
// 制作bus假节点
for (i = 0; i < num + 3; i++) {
var x = o.x + i * 100
var y = o.y + 250
var node = {
id: `busNode_${i}`,
name: `busNode_${i}`,
value: `busNode_${i}`,
x: x,
y: y,
itemStyle: {
opacity: 0
},
symbolSize: 0,
label: {
normal: {
show: true,
position: 'bottom',
fontSize: '12'
}
},
symbol: 'image://http:a.png',
}
dataNodes.push(node)
mockBus.push(node)
}
// 连接各data和bus节点
for (let j = 0; j < num + 3; j++) {
// console.log(dataNodes[j], mockBus[j]);
// console.log(mockBus.filter(i => i.x === dataNodes[j].x))
var node = mockBus.filter(i => i.x === dataNodes[j].x)[0].id
if (j < data_nodes.length) {
var dataLink = {
source: `bus_${j}`,
target: node
}
dataLinks.push(dataLink)
}
var busLink = {
source: `busNode_${j}`,
target: `busNode_${j + 1}`
}
dataLinks.push(busLink)
}
var mockBusLen = mockBus.length
var width = 200 * mockBusLen
var height = 400
return {
dataNodes: dataNodes,
dataLinks: dataLinks,
width: width,
height: height
}
}
function createStarNodeDatas(data_nodes, o, radius) {
function getNodePositon(n, r) {
var angle = 2 * Math.PI / n
var sumAngle = 0
var arr = []
for (var i = 0; i < n; i++) {
var x = r * Math.sin(sumAngle)
var y = r * Math.cos(sumAngle)
sumAngle += angle
var obj = {
x: x,
y: y
}
arr.push(obj)
}
return arr
}
var num = data_nodes.length
var nodeLen = 0
var dataNodes = []
var dataLinks = []
var mockBus = []
var starR = radius
// 制作data假节点
var pointsArr = getNodePositon(num, starR)
var node = {
id: `starO`,
name: `starO`,
value: `starO`,
x: o.x,
y: o.y,
itemStyle: {
opacity: 0
},
symbolSize: 0,
label: {
normal: {
show: true,
position: 'bottom',
fontSize: '12'
}
},
symbol: 'image://http:a.png',
}
dataNodes.push(node)
for (var i = 0; i < pointsArr.length; i++) {
data_nodes[i].x = o.x + pointsArr[i].x
data_nodes[i].y = o.y + pointsArr[i].y
dataNodes.push(data_nodes[i])
nodeLen++
}
// 连接各data节点与中心节点
for (let j = 0; j < num; j++) {
// 连接自己的环
// var dataLink = {
// source: `${data_busNodes[j].id}`,
// target: `${data_busNodes[j + 1].id}`
// }
// dataLinks.push(dataLink)
// 连接和中心点的环
dataLink = {
source: `starO`,
target: `${data_nodes[j].id}`
}
dataLinks.push(dataLink)
}
// 连接起始点和终点
// var dataLink = {
// source: `${data_busNodes[0].id}`,
// target: `${data_busNodes[num - 1].id}`
// }
// dataLinks.push(dataLink)
// var mockBusLen = mockBus.length
// var width = 200 * mockBusLen
// var height = 400
return {
dataNodes: dataNodes,
dataLinks: dataLinks,
width: starR,
height: starR
}
}
function createRingNodeDatas(data_nodes, o, radius) {
function getNodePositon(n, r) {
var angle = 2 * Math.PI / n
var sumAngle = 0
var arr = []
for (var i = 0; i < n; i++) {
var x = r * Math.sin(sumAngle)
var y = r * Math.cos(sumAngle)
sumAngle += angle
var obj = {
x: x,
y: y
}
arr.push(obj)
}
return arr
}
var num = data_nodes.length
var nodeLen = 0
var dataNodes = []
var dataLinks = []
var mockBus = []
var starR = radius
// 制作data假节点
var pointsArr = getNodePositon(num, starR)
var node = {
id: `starO`,
name: `starO`,
value: `starO`,
x: o.x,
y: o.y,
label: {
normal: {
show: true,
position: 'bottom',
fontSize: '12'
}
},
symbol: 'image://http:a.png',
}
dataNodes.push(node)
for (var i = 0; i < pointsArr.length; i++) {
data_nodes[i].x = o.x + pointsArr[i].x
data_nodes[i].y = o.y + pointsArr[i].y
dataNodes.push(data_nodes[i])
nodeLen++
}
// 连接各data节点与中心节点
for (let j = 0; j < num; j++) {
// 连接自己的环
// var dataLink = {
// source: `${data_busNodes[j].id}`,
// target: `${data_busNodes[j + 1].id}`
// }
// dataLinks.push(dataLink)
// 连接和中心点的环
dataLink = {
source: `starO`,
target: `${data_nodes[j].id}`
}
dataLinks.push(dataLink)
}
// 连接起始点和终点
// var dataLink = {
// source: `${data_busNodes[0].id}`,
// target: `${data_busNodes[num - 1].id}`
// }
// dataLinks.push(dataLink)
// 连接终点和中心点
// var dataLink = {
// source: `starO`,
// target: `${data_busNodes[num - 1].id}`
// }
// dataLinks.push(dataLink)
// var mockBusLen = mockBus.length
// var width = 200 * mockBusLen
// var height = 400
return {
dataNodes: dataNodes,
dataLinks: dataLinks,
width: starR,
height: starR
}
}
function createTreeNodeDatas(data_nodes, o, radius) {
var num = data_nodes.length
var nodeLen = 0
var dataNodes = []
var dataLinks = []
var mockBus = []
var levelArr = []
var tree
var flagNode = {
node: '',
times: 1
}
var levelNum = 1
var nowRadius
data_nodes.forEach(e => {
e.name = e.entityDeviceId
e.value = e.deviceName
e.label = { "normal": { "show": true, "position": "bottom", "fontSize": "12" } }
e.symbolSize = 20
})
if (data_nodes[0].entityId === '') {
tree = data_nodes[0]
}
(function createTree(node, datas, level) {
node.children = data_nodes.filter(i => i.entityId == node.entityDeviceId)
for (var i = 0; i < node.children.length; i++) {
node.children[i].levelTimes = i
}
var levelTime = node.levelTimes// 当前层级循环的次数
// 设置当前接节点xy坐标
if (node.entityId === '') {
node.x = o.x
node.y = o.y
nowRadius = 2 * radius
} else {
var levelNumber = data_nodes.filter(i => i.entityId === node.entityId).length
var x = data_nodes.filter(i => i.entityDeviceId === node.entityId)[0].x + (nowRadius / levelNumber) * (levelTime)
// - nowRadius / 2
var y = data_nodes.filter(i => i.entityDeviceId === node.entityId)[0].y + radius
node.x = x
node.y = y
}
if (node.children.length > 0) {
level++
nowRadius = nowRadius - (level - 1) * nowRadius / 5
node.children.forEach(i => arguments.callee(i, datas, level))
}
})(tree, data_nodes, 0);
(function createLevel(node, level) {
levelArr.push({ level: level, node: node })
if (node.children && node.children.length > 0) {
level++
node.children.forEach(i => arguments.callee(i, level))
}
})(tree, 1);
levelArr.sort(function (i, j) { return i.level - j.level });
levelArr.forEach(element => {
dataNodes.push(element.node)
});
// 连接线
levelArr.forEach(element => {
var node = element.node
if (node.entityId !== '') {
var nodeId = data_nodes.filter(e => e.entityDeviceId === node.entityId)[0].id
dataLinks.push({
source: `${nodeId}`,
target: `${node.id}`
})
}
})
// var width = 200 * mockBusLen
// var height = 400
return {
dataNodes: dataNodes,
dataLinks: dataLinks,
// width: width,
// height: height
}
}
function createNetNodeDatas(data_nodes, o, radius) {
function getNodePositon(n, r) {
var angle = 2 * Math.PI / n
var sumAngle = 0
var arr = []
for (var i = 0; i < n; i++) {
var x = r * Math.sin(sumAngle)
var y = r * Math.cos(sumAngle)
sumAngle += angle
var obj = {
x: x,
y: y
}
arr.push(obj)
}
return arr
}
var num = data_nodes.length
var nodeLen = 0
var dataNodes = []
var dataLinks = []
var mockBus = []
var starR = radius
// 制作data假节点
var pointsArr = getNodePositon(num, starR)
for (var i = 0; i < pointsArr.length; i++) {
data_nodes[i].x = o.x + pointsArr[i].x
data_nodes[i].y = o.y + pointsArr[i].y
dataNodes.push(data_nodes[i])
nodeLen++
}
// todo 网状，线条重复需要去重
// 连接各data节点与中心节点
dataNodes.forEach(element => {
dataNodes.forEach(elements => {
if (element.id != elements.id)
dataLinks.push({
source: `${element.id}`,
target: `${elements.id}`
})
})
})
// var width = 200 * mockBusLen
// var height = 400
return {
dataNodes: dataNodes,
dataLinks: dataLinks,
width: starR,
height: starR
}
}
//基准圆点
var o = { x: 0, y: 0 }
var dataNodes
var dataLinks
// 总线图预览
// var bus = createBusNodeDatas(data_busNodes, o)
// console.log(bus);
// dataNodes = bus.dataNodes
// dataLinks = bus.dataLinks
// 星型图预览
// o = { x: 1000, y: 1000 }
// var star = createStarNodeDatas(data_busNodes, o,200)
// dataNodes = star.dataNodes
// dataLinks = star.dataLinks
// 环型图预览
// o = { x: 2000, y: 2000 }
// var star = createRingNodeDatas(data_busNodes, o,200)
// dataNodes = star.dataNodes
// dataLinks = star.dataLinks
// 树型图预览
o = { x: 0, y: 0 }
var tree = createTreeNodeDatas(params, o, 200)
console.log(tree);
dataNodes = tree.dataNodes
dataLinks = tree.dataLinks
// 网状图预览
// o = { x: 0, y: 0 }
// var net = createNetNodeDatas(params, o, 200)
// dataNodes = net.dataNodes
// dataLinks = net.dataLinks
// dataNodes = bus.dataNodes.concat(star.dataNodes)
// dataLinks = bus.dataLinks.concat(star.dataLinks)
// 创建chart 相当于new一个对象
var chart = echarts.init(document.querySelector("div"));
// 图表内容，样式
var option = {
title: {
text: '拓扑图',
},
tooltip: {},
// animationDurationUpdate: 10,
// animationEasingUpdate: 'quinticInOut',
// animationEasing: 'elasticOut',
// animationDelayUpdate: function (idx) {
// return idx * 1;
// },
// grid: {
// show: false,
// y: '0',
// y2: '0',
// x: '0',
// x2: '0'
// },
series: [
{
type: 'graph',
// layout: 'force',
symbolSize: 30,
// roam: true,
focusNodeAdjacency: true,
legend: {
left: 'left',
data: ['h1', 'h2', 'h3']
},
edgeSymbol: ['circle'],
edgeSymbolSize: [1, 1],
edgeLabel: {
normal: {
show: false
},
emphasis: {
textStyle: {
fontSize: 16
}
}
},
// animationDelay: function (idx) {
// return idx * 300;
// },
force: {
edgeLength: 100,
// repulsion: 200,
gravity: 0,
// repulsion: 100
},
//节点信息
data: dataNodes,
links: dataLinks,
lineStyle: {
curveness: 0
},
zoom: 0.8
}
],
};
option.series[0].data = option.series[0].data;
option.series[0].links = option.series[0].links;
//配置图表的样式
chart.setOption(option);
var doNode
// 添加echarts 事件,'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'
chart.on('mousedown', function (params) {
console.warn(params, 'mousedown');
doNode = params.data
// console.warn(params.data.entityDeviceId);
});
chart.on('mousemove', function (params) {
// console.log(params.event.offsetX, params.event.offsetY, 'moving');
// var offsetX = params.event.offsetX
// var offsetX = params.event.offsetY
// console.log(offsetX, offsetY);
// console.log(dataNodes.filter(i => i.entityDeviceId === doNode.entityDeviceId));
// dataLinks
});
chart.on('click', function (params) {
console.log(params, 'click');
});
chart.on('mouseup', function (params) {
console.log(params, 'mouseup');
});
chart.on('globalout', function (params) {
// 离开图层
console.log(params, 'globalout');
});
var move = {
offsetX: 0,
offsetY: 0
}
var isClick = 0
var canvas = document.querySelector('canvas')
canvas.addEventListener('mousedown', function (e) {
// console.log('mousedown', e);
move.offsetX = e.offsetX
move.offsetY = e.offsetY
isClick = 1
}, false)
canvas.addEventListener('mouseup', function (e) {
console.log('mouseup', e);
move.offsetX = 0
move.offsetY = 0
isClick = 0
})
canvas.addEventListener('mousemove', debounce(function (e) {
// console.log(e.offsetX, move.offsetX);
if (isClick) {
var offsetX = e.offsetX - move.offsetX
var offsetY = e.offsetY - move.offsetY
console.log('xChange: ' + offsetX, 'yChange: ' + offsetY);
}
}, 12, true))
/**
* 防反跳。fn函数在最后一次调用时刻的delay毫秒之后执行！
* @param fn 执行函数
* @param delay 时间间隔
* @param isImmediate 为true，debounce会在delay时间间隔的开始时立即调用这个函数
* @returns {Function}
*/
function debounce(fn, delay, isImmediate) {
var timer = null; //初始化timer，作为计时清除依据
return function () {
var context = this; //获取函数所在作用域this
var args = arguments; //取得传入参数
clearTimeout(timer);
if (isImmediate && timer === null) {
//时间间隔外立即执行
fn.apply(context, args);
timer = 0;
return;
}
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, delay);
}
}
</script>
</body>
</html>
这篇关于echarts 下 用关系图实现拓扑图结构（树形，星型，网状，总线，环形）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
【机器学习(二)】分类和回归任务-决策树(Decision Tree,DT)算法-Sentosa_DSML社区版11-25
-
增量更新怎么做？-icode9专业技术文章分享11-23
-
压缩包加密方案有哪些？-icode9专业技术文章分享11-23
-
用shell怎么写一个开机时自动同步远程仓库的代码？-icode9专业技术文章分享11-23
-
webman可以同步自己的仓库吗？-icode9专业技术文章分享11-23
-
在 Webman 中怎么判断是否有某命令进程正在运行？-icode9专业技术文章分享11-23
-
如何重置new Swiper?-icode9专业技术文章分享11-23
-
oss直传有什么好处？-icode9专业技术文章分享11-23
-
如何将oss直传封装成一个组件在其他页面调用时都可以使用？-icode9专业技术文章分享11-23
-
怎么使用laravel 11在代码里获取路由列表？-icode9专业技术文章分享11-23
-
怎么实现ansible playbook 备份代码中命名包含时间戳功能？-icode9专业技术文章分享11-22
-
ansible 的archive 参数是什么意思？-icode9专业技术文章分享11-22
-
ansible 中怎么只用archive 排除某个目录？-icode9专业技术文章分享11-22
-
exclude_path参数是什么作用？-icode9专业技术文章分享11-22
-
微信开放平台第三方平台什么时候调用数据预拉取和数据周期性更新接口？-icode9专业技术文章分享11-22
栏目导航
