< html lang= "en" >
< head >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>< / head >
< body >
<div id="main1" style="width: 600px;height:400px;"></div>
<div id="main" style="width: 600px;height:400px;"></div>
X
<div id="main3" style="width: 600px;height:400px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.onload = function () {
// domecharts
setEchart("main1", "rect");
setEchart("main", "circle");
serEc();
}
function setEchart(id, style) {
var myChart = echarts.init(document.getElementById(id));
myChart.showLoading();
var symbolCenter = ["arrow", ""];
var symbolOuter = ["", "arrow"];
var webkitDep = {
"type": "force",
"categories": [ //
{
"name": "", //
"keyword": {},
"base": ""
}
],
"nodes": [ //
{
"name": "", //
"value": 3,
"category": 0, //0
"tag": 0
},
{
"name": "",
"value": 1,
"category": 0,
"tag": 1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": -1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": 1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": -1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": -1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": 1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": 1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": 1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": 1
},
{
"name": "",
"value": 1,
"category": 0,
"tag": 1
}
],
"links": [ //
{
"source": 0, //0
"target": 1, //11
//edgeSymbol: ["arrow", ""],
"symbol": symbolCenter
},
{
"source": 0,
"target": 2,
"symbol": symbolCenter
},
{
"source": 0,
"target": 3,
"symbol": symbolOuter
},
{
"source": 0,
"target": 4,
"symbol": symbolOuter
},
{
"source": 0,
"target": 5,
"symbol": symbolOuter
},
{
"source": 0,
"target": 6,
"symbol": symbolOuter
},
{
"source": 0,
"target": 7,
"symbol": symbolOuter
},
{
"source": 0,
"target": 8,
"symbol": symbolOuter
},
{
"source": 0,
"target": 9,
"symbol": symbolOuter
},
{
"source": 0,
"target": 10,
"symbol": symbolOuter
}
]
};
var LeftArray = [];
var rightArray = [];
webkitDep.nodes[0].x = 0;
webkitDep.nodes[0].y = 0;
var ori = [webkitDep.nodes[0]];
for (var l = 1; l < webkitDep.nodes.length; lPP) {
if (webkitDep.nodes[l].tag == 1) {
rightArray.push(webkitDep.nodes[l])
} else {
LeftArray.push(webkitDep.nodes[l])
}
}
function sort(ident, sortedArray) {
var len = sortedArray.length;
var ArrayMiddle = Math.floor(len / 2);
if (ident > 0) {
ident = 1;
} else if (ident < 0) {
ident = -1;
}
if (len > 0) {
if (len == 1) {
sortedArray[0].x = ident * 50;
sortedArray[0].y = 0;
} else if (len == 2) {
sortedArray[0].x = ident * 50;
sortedArray[0].y = 50;
sortedArray[1].x = ident * 50;
sortedArray[1].y = -50;
} else {
if (len % 2 === 0) {
for (var i = 0; i < ArrayMiddle; iPP) {
sortedArray[i].x = ident * (50 + i * 50);
sortedArray[i].y = (ArrayMiddle - i) * 50;
sortedArray[len - 1 - i].x = ident * (50 + i * 50);
sortedArray[len - 1 - i].y = -(ArrayMiddle - i) * 50;
}
} else {
for (var i = 0; i <= ArrayMiddle; iPP) {
sortedArray[i].x = ident * (50 + i * 50);
sortedArray[i].y = (ArrayMiddle - i) * 50;
sortedArray[len - 1 - i].x = ident * (50 + i * 50);
sortedArray[len - 1 - i].y = -(ArrayMiddle - i) * 50;
}
}
}
console.log(1)
}
return sortedArray;
}
rightArray = sort(1, rightArray);
LeftArray = sort(-1, LeftArray);
webkitDep.nodes = ori.concat(rightArray, LeftArray);
myChart.hideLoading();
option = {
legend: {
data: [""] //name
},
series: [{
type: "graph",
layout: "none", //force
animation: false,
label: {
normal: {
show: true,
position: "right"
}
},
data: webkitDep.nodes.map(function (node, idx, arr) {
var i = arr.length;
node.id = idx;
node.symbol = style //circle--rect
node.symbolSize = [50, 50];
return node;
}),
// itemStyle:{
// shadowOffsetX:100,
// shadowOffsetY:120,
// shadowColor:"transparent"
// },
categories: webkitDep.categories,
// force: {
// edgeLength: 200,//dasd
// repulsion: 1000, //
// },
edges: webkitDep.links
}]
};
myChart.setOption(option);
myChart.on("click", function (param) {
console.log(param);
//param.dataIndex
webkitDep.nodes.push({
"name": "1",
"value": 1,
"category": 0,
"tag": 0,
"X": 200,
"Y": 200
})
var length = webkitDep.links.length;
webkitDep.links.push({
"source": param.dataIndex,
"target": length + 1,
"symbol": symbolOuter
})
option.data = webkitDep.nodes.map(function (node, idx, arr) {
var i = arr.length;
node.id = idx;
node.symbol = "circle" //circle--rect
node.symbolSize = [10, 10]
return node;
})
option.edges = webkitDep.links;
console.log(webkitDep.nodes)
console.log(webkitDep.links)
console.log(option.data)
myChart.setOption(option);
})
}
function serEc() {
var obj = echarts.init(document.getElementById("main3"));
var echartsdata = {
chart3: {}
}
echartsdata.chart3 = {
name: "ANJINGHUAN001",
children: [{
children: null,
counts: 4,
empno: "E00000A00203",
groupBatchno: null,
groupId: null,
loginIp: "10.112.6.111",
loginNum: 13,
name: [{
loginNumber: 13,
loginUm: "LIYIHUAN506",
loginUmNum: 1,
loinIp: null,
number: 0
}],
statDate: null,
um: "ANJINGHUAN001"
},
{
children: null,
counts: 4,
empno: "E00000A00203",
groupBatchno: null,
groupId: null,
loginIp: "10.118.143.131",
loginNum: 30,
name: [{
loginNumber: 30,
loginUm: "HUANGSUHAN156",
loginUmNum: 1,
loinIp: null,
number: 10
}],
statDate: null,
um: "ANJINGHUAN001"
},
{
children: null,
counts: 4,
empno: "E00000A00203",
groupBatchno: null,
groupId: null,
loginIp: "10.119.123.186",
loginNum: 5,
name: [{
loginNumber: 5,
loginUm: "TANGYIXIANG047",
loginUmNum: 1,
loinIp: null,
number: 11
}],
statDate: null,
um: "ANJINGHUAN001"
},
{
children: null,
counts: 904,
empno: "E00000A00203",
groupBatchno: null,
groupId: null,
loginIp: "10.12.252.8",
loginNum: 1,
name: [{
loginNumber: 1,
loginUm: "2090003776",
loginUmNum: 226,
loinIp: null,
number: 12
}],
statDate: null,
um: "ANJINGHUAN001"
}
]
}
var arr1 = [];
var arr2 = [];
arr1.push({
name: echartsdata.chart3.name,
rname: echartsdata.chart3.name,
x: 1400,
y: 1400,
itemStyle: {
normal: {
color: "-sharp229EF5"
}
}
});
if (echartsdata.chart3.children) {
var length1 = parseInt(echartsdata.chart3.children.length) - 1;
for (var a in echartsdata.chart3.children) {
arr1.push({
name: echartsdata.chart3.children[a].loginIp,
rname: echartsdata.chart3.children[a].loginIp,
x: a * (3000 / length1),
y: 900,
num: echartsdata.chart3.children[a].loginNum,
itemStyle: {
normal: {
color: "-sharpF8B92B"
}
}
});
arr2.push({
source: echartsdata.chart3.name,
target: echartsdata.chart3.children[a].loginIp,
num1: echartsdata.chart3.children[a].loginNum,
});
if (echartsdata.chart3.children[a].name) {
for (var b in echartsdata.chart3.children[a].name) {
if (echartsdata.chart3.children[a].counts > 10) {
arr1.push({
name: "chars" + echartsdata.chart3.children[a].name[b].number,
rname: "10",
num: echartsdata.chart3.children[a].counts,
x: 0,
y: 30,
itemStyle: {
normal: {
color: "-sharpF95C5B"
}
}
});
arr2.push({
source: echartsdata.chart3.children[a].loginIp,
target: "chars" + echartsdata.chart3.children[a].name[b].number,
num1: echartsdata.chart3.children[a].counts
});
} else {
arr1.push({
name: "char" + echartsdata.chart3.children[a].name[b].number,
rname: echartsdata.chart3.children[a].name[b].loginUm,
num: echartsdata.chart3.children[a].name[b].loginNumber,
x: 0,
y: 30,
itemStyle: {
normal: {
color: "-sharpF95C5B"
}
}
});
arr2.push({
source: echartsdata.chart3.children[a].loginIp,
target: "char" + echartsdata.chart3.children[a].name[b].number,
num1: echartsdata.chart3.children[a].name[b].loginNumber
});
}
}
}
}
var length3 = 0;
var y = [];
for (var d in echartsdata.chart3.children) {
length3 += echartsdata.chart3.children[d].name.length;
}
length3 = length3 - 1;
for (var f = 0; f < length3 + 1; fPP) {
y.push(f * (3000 / length3));
}
var g = 0;
for (var e in arr1) {
if (arr1[e].y == 30) {
gPP;
arr1[e].x = parseInt(y[g - 1]);
}
}
}
option = {
tooltip: {
formatter: function (params) {
if (params.dataType == "node") {
if (!params.data.num) {
params.data.num = ""
}
return params.data.rname + ":<br>" + params.data.num
}
},
},
series: [{
type: "graph",
layout: "none",
symbolSize: 60,
roam: false,
label: {
normal: {
show: true,
formatter: function (params) {
var names = "";
for (k = 0; k < params.data.rname.length - 1; k += 7) {
if (params.data.rname.length - k < 8) {
names = names + params.data.rname.substring(k, k + 7);
} else {
names = names + params.data.rname.substring(k, k + 7) +
"\n";
}
}
return names
}
}
},
edgeSymbol: ["circle", "arrow"],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
show: true,
offset: [50, 60],
formatter: function (params) {
return ""//"{a| " + params.data.num1 + "}"
},
rich: {
a: {
verticalAlign: "top",
color: "-sharp229EF5"
},
b: {
verticalAlign: "bottom",
color: "-sharp444"
}
}
}
},
data: arr1,
links: arr2,
lineStyle: {
normal: {
color: "-sharp229EF5",
type: "dashed",
opacity: 0.9,
width: 1.5,
curveness: 0
}
}
}]
}
obj.setOption(option);
}
</script>< / body >
< / html >