Gojs在Vue中绘制树形图、拓扑图，可收缩，动态连线效果代码
代码语言：html
所属分类：图表
代码描述：Gojs在Vue中绘制树形图、拓扑图，可收缩，动态连线效果代码
代码标签： gojs vue 绘制 树形图 拓扑图 可收缩 动态 连线
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>treeChart,topologyChart,flexible,dynamicConnection 树形图、拓扑图，可收缩，动态连线，Gojs 在 Vue 中使用</title>
<style>
/* #myDiagramDiv {
background-color: #F8F8F8;
border: 1px solid #aaa;
}
*/
.topo-chart {
position: relative;
height: 808px;
width: 100%;
background: #050f26;
}
.chart {
height: 100%;
width: 100%;
z-index: 0;
}
.topo-operate {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 120px;
height: 60px;
width: 100%;
z-index: 1;
background: #050f26;
}
.operate-item {
margin-left: 30px;
}
.operate-item span {
display: inline-block;
color: #0f98b4;
font-size: 16px;
cursor: pointer;
}
.operate-item .collapse-icon {
margin-left: 5px;
width: 10px;
height: 10px;
background-size: 20px 10px;
}
.operate-item .expand-icon {
margin-left: 5px;
width: 10px;
height: 10px;
background-size: 20px 10px;
}
.operate-item .zoom-icon {
margin-left: 5px;
width: 11px;
height: 10px;
background-size: 22px 10px;
}
.operate-item .full-screen {
width: 12px;
height: 12px;
background-size: 24px 12px;
}
.operate-item .full-screen-open {
}
.operate-item .full-screen-close {
}
.operate-item:hover span {
color: #23daff;
}
.operate-item:hover .collapse-icon,
.operate-item:hover .expand-icon,
.operate-item:hover .zoom-icon,
.operate-item:hover .full-screen {
background-position-x: 100%;
}
.topo-scale {
position: absolute;
bottom: 20px;
right: 20px;
color: #8e8e8e;
font-size: 16px;
}
</style>
</head>
<body>
<div id="sample" style="height: 100%; width: 100%;">
<diagram :topology-data='diagramData'></diagram>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
<script>
var topoChartData = {
nodeDataArray: [
{
key: "root",
group: "",
category: "root",
root: {
name: "根节点" },
isGroup: false },
{
key: "1,1",
group: "",
category: "layerTwoNodeInfo",
layerTwoNodeInfo: {
name: "默认组织/默认组织",
count: 5,
category: "orgnizInfo",
parentId: 1,
parentName: "默认组织",
childId: 1,
childName: "默认组织" },
isGroup: false },
{
key: "DevNull,DevNull",
group: "",
category: "layerTwoNodeInfo",
layerTwoNodeInfo: {
name: "未配置" },
isGroup: false },
{
key: "5454efcd-14bb-4425-900c-de24767daf23",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "5454efcd-14bb-4425-900c-de24767daf23",
devName: "1.20",
devStatus: 1 },
isGroup: false },
{
key: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
devName: "1.74",
devStatus: 1 },
isGroup: false },
{
key: "386108c1-c180-437b-9512-701bf829b620",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "386108c1-c180-437b-9512-701bf829b620",
devName: "1.57-",
devStatus: 1 },
isGroup: false },
{
key: "e32b804b-71e2-45aa-b65f-f46f5853d3f5",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "e32b804b-71e2-45aa-b65f-f46f5853d3f5",
devName: "1.221",
devStatus: 0 },
isGroup: false },
{
key: "f378fada-ec81-4b85-9fb4-8bdfc8ea43a5",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "f378fada-ec81-4b85-9fb4-8bdfc8ea43a5",
devName: "1.110",
devStatus: 0 },
isGroup: false },
{
key: "DevUuidNull",
group: "",
category: "layerThreeNodeInfo2",
layerThreeNodeInfo2: {
devName: "未配置" },
isGroup: false },
{
key: "P1",
group: "",
category: "layerFourGroupOneInfo",
layerFourGroupOneInfo: {
name: "默认组织",
parentId: 1,
parentName: "默认组织" },
isGroup: true },
{
key: "C1",
group: "P1",
category: "layerFourGroupTwoInfo",
layerFourGroupTwoInfo: {
name: "默认组织",
parentId: 1,
parentName: "默认组织",
childId: 1,
childName: "默认组织",
count: "10" },
isGroup: true },
{
key: "node78",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 78,
nodeUuid: "1b8cd73e-75c0-4940-beec-394a9f27be84",
nodeName: "test",
isProtected: 0 },
isGroup: false },
{
key: "node69",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 69,
nodeUuid: "1e757f87-eee0-44e2-8cf9-nodee47df8cf6e",
nodeName: "1.62",
nodeStatus: 3,
isProtected: 1,
nodeFlag: "386108c1-c180-437b-9512-701bf829b620,," },
isGroup: false },
{
key: "node42",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 42,
nodeUuid: "228ff1d5-cd1f-4ca6-8753-cfab97be89c5",
nodeName: "user",
isProtected: 0 },
isGroup: false },
{
key: "node63",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 63,
nodeUuid: "371444a9-f2ed-4b5b-a3ec-1354833bb91c",
nodeName: "测试2",
nodeStatus: 4,
isProtected: 1,
nodeFlag: "386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "node77",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 77,
nodeUuid: "83a0c5a8-683c-42ed-bf32-74a766a87b39",
nodeName: "q",
nodeStatus: 2,
isProtected: 1,
nodeFlag:
"f378fada-ec81-4b85-9fb4-8bdfc8ea43a5,52d59c8d-1f8b-4405-8036-dfe51e8419f1" },
isGroup: false },
{
key: "node70",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 70,
nodeUuid: "91f9c584-5fc1-4418-9c3f-b906dea19e31",
nodeName: "Syslog\ufffdʲ\ufffd\ufffd\ufffd\ufffd",
isProtected: 0 },
isGroup: false },
{
key: "node65",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 65,
nodeUuid: "a5a8408f-1b93-4e7b-9f5d-22c8758c46b5",
nodeName: "55test",
nodeStatus: 10,
isProtected: 1,
nodeFlag:
"52d59c8d-1f8b-4405-8036-dfe51e8419f1,386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "node71",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 71,
nodeUuid: "bb573cb7-7575-4f71-b638-7bd58cc86915",
nodeName: "MySQL-1.112-3306-0",
isProtected: 0 },
isGroup: false },
{
key: "node49",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 49,
nodeUuid: "cd8fac06-b4e0-4c41-b13b-33d318c6fc1a",
nodeName: "1.61",
isProtected: 0 },
isGroup: false },
{
key: "node48",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 48,
nodeUuid: "e47c8499-6311-4fb1-a5cf-bea6798bdcce",
nodeName: "1.202",
isProtected: 0 },
isGroup: false },
{
key: "nodeAddC1",
group: "C1",
category: "layerFourNodeInfo2",
layerFourNodeInfo2: {
id: "1" },
isGroup: false },
{
key: "P2",
group: "",
category: "layerFourGroupOneInfo",
layerFourGroupOneInfo: {
name: "研发部",
parentId: 2,
parentName: "研发部" },
isGroup: true },
{
key: "C2",
group: "P2",
category: "layerFourGroupTwoInfo",
layerFourGroupTwoInfo: {
name: "研发部",
parentId: 2,
parentName: "研发部",
childId: 2,
childName: "研发部",
count: "2" },
isGroup: true },
{
key: "node67",
group: "C2",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 67,
nodeUuid: "6bba3b6c-3cf1-4516-b89b-f3df8360446a",
nodeName: "重名测试",
nodeStatus: null,
isProtected: 1,
nodeFlag: "52d59c8d-1f8b-4405-8036-dfe51e8419f1" },
isGroup: false },
{
key: "node68",
group: "C2",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 68,
nodeUuid: "debcd5ba-bfaf-46e5-b2e2-e0c985fc3914",
nodeName: "1.171",
isProtected: 1,
nodeFlag: "52d59c8d-1f8b-4405-8036-dfe51e8419f1" },
isGroup: false },
{
key: "nodeAddC2",
group: "C2",
category: "layerFourNodeInfo2",
layerFourNodeInfo2: {
id: "2" },
isGroup: false },
{
key: "C3",
group: "P2",
category: "layerFourGroupTwoInfo",
layerFourGroupTwoInfo: {
name: "软件一部",
parentId: 2,
parentName: "研发部",
childId: 3,
childName: "软件一部",
count: "7" },
isGroup: true },
{
key: "node62",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 62,
nodeUuid: "07925248-4e72-4bf1-b5a2-8f4cd70de9a5",
nodeName: "1.20-自动确认测试",
nodeStatus: 2,
isProtected: 1,
nodeFlag:
"b6e85b6e-nodeff-4bdc-80f9-2500088d3f92,386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "node59",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 59,
nodeUuid: "38e83e06-9a4c-4node7-80eb-683f8930ae19",
nodeName: "测试类型2",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "node57",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 57,
nodeUuid: "45node9567-3b30-4117-9313-bff3f65e5469",
nodeName: "测试类型4",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "node61",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 61,
nodeUuid: "69b75fed-a3a3-48ee-9d81-2f505246e931",
nodeName: "测试",
nodeStatus: 2,
isProtected: 1,
nodeFlag:
"b6e85b6e-nodeff-4bdc-80f9-2500088d3f92,386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "node60",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 60,
nodeUuid: "85c3642b-2f3e-4d60-88ca-d2c2de08c485",
nodeName: "测试类型1",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "node58",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 58,
nodeUuid: "d6ffe611-3ad0-4258-8955-b4ad1fb68f3d",
nodeName: "测试类型3",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "node56",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 56,
nodeUuid: "e95e62ac-node41-4d2e-a6d9-cb734cf95a55",
nodeName: "测试类型5",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "nodeAddC3",
group: "C3",
category: "layerFourNodeInfo2",
layerFourNodeInfo2: {
id: "3" },
isGroup: false },
{
key: "C5",
group: "P2",
category: "layerFourGroupTwoInfo",
layerFourGroupTwoInfo: {
name: "软件三部",
parentId: 2,
parentName: "研发部",
childId: 5,
childName: "软件三部",
nodeName: null,
count: "1" },
isGroup: true },
{
key: "node76",
group: "C5",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 76,
nodeUuid: "3d535c16-df76-425c-9509-6c2ed907343a",
nodeName: "1.122-自动确认测试",
nodeStatus: 3,
isProtected: 1,
nodeFlag: "386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "nodeAddC5",
group: "C5",
category: "layerFourNodeInfo2",
layerFourNodeInfo2: {
id: "5" },
isGroup: false }],
linkDataArray: [
{
from: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
to: "node67",
category: "layerThreeLinkInfo" },
{
from: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
to: "node77",
category: "layerThreeLinkInfo" },
{
from: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
to: "node65",
category: "layerThreeLinkInfo" },
{
from: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
to: "node68",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node62",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node69",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node63",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node76",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node61",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node65",
category: "layerThreeLinkInfo" },
{
from: "f378fada-ec81-4b85-9fb4-8bdfc8ea43a5",
to: "node77",
category: "layerThreeLinkInfo" },
{
from: "DevUuidNull",
to: "node78",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node42",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node70",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node71",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node49",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node48",
category: "layerThreeLinkInfo2" },
{
from: "root",
to: "1,1",
category: "root" },
{
from: "root",
to: "DevNull,DevNull",
category: "root" },
{
from: "1,1",
to: "5454efcd-14bb-4425-900c-de24767daf23",
category: "layerTwoNodeInfo" },
{
from: "1,1",
to: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
category: "layerTwoNodeInfo" },
{
from: "1,1",
to: "386108c1-c180-437b-9512-701bf829b620",
category: "layerTwoNodeInfo" },
{
from: "1,1",
to: "e32b804b-71e2-45aa-b65f-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0