-
恋战 WhiteInte2019-02-25 00:00
- 10
- 25
- 0
<!DOCTYPE html>
<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>
<p>此处用方块实现，会导致箭头的缺失</p>
<div id="main1" style="width: 600px;height:400px;"></div>
<p>此处用圆可以实现第一圈不定个数的基点，但在根据点击第一圈的某点展开对应的数据时，却难以动态生成第二圈基点</p>
<div id="main" style="width: 600px;height:400px;"></div>
<p>此处用圆形节点 同层数据 定X轴 方式 一次性展开可满足业务需要</p>
<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 () {
// 基于准备好的dom，初始化echarts实例
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, //目标节点，1表示与索引为1的节点进行连接
//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; l++) {
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; i++) {
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; i++) {
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: '#229EF5'
}
}
});
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: '#F8B92B'
}
}
});
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: '#F95C5B'
}
}
});
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: '#F95C5B'
}
}
});
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; f++) {
y.push(f * (3000 / length3));
}
var g = 0;
for (var e in arr1) {
if (arr1[e].y == 30) {
g++;
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: '#229EF5'
},
b: {
verticalAlign: 'bottom',
color: '#444'
}
}
}
},
data: arr1,
links: arr2,
lineStyle: {
normal: {
color: '#229EF5',
type: 'dashed',
opacity: 0.9,
width: 1.5,
curveness: 0
}
}
}]
}
obj.setOption(option);
}
</script></body>
</html>
0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部