图谱echarts graph配置项内容和展示
graph关系图，具体位置需要根据画布大小，宽高耐心调整。
配置项如下
/////////////////////参数///////////////////////////////
var data = {
title: '图谱',
dataName: ["vue", "css", "node", "java", "js", "html", "c", "c++", "ios", "php", "Android"],
dataLink: [
[
"vue",
"Android",
4.1,
1
],
[
"vue",
"css",
36.1,
1
],
[
"vue",
"java",
11.7,
1
],
[
"vue",
"html",
11.7,
1
],
[
"vue",
"c++",
5.5,
1
],
[
"php",
"Android",
10.1,
10
],
[
"php",
"css",
0.7,
10
],
[
"php",
"java",
15.4,
10
],
[
"php",
"html",
24.9,
10
],
[
"php",
"c++",
12.8,
10
],
[
"Android",
"vue",
0.3,
11
],
[
"Android",
"php",
17.3,
11
],
[
"Android",
"node",
1.3,
11
],
[
"Android",
"js",
19.4,
11
],
[
"Android",
"c",
6.8,
11
],
[
"Android",
"ios",
12.9,
11
],
[
"css",
"vue",
41.1,
2
],
[
"css",
"php",
3,
2
],
[
"css",
"node",
5.1,
2
],
[
"css",
"js",
9.3,
2
],
[
"css",
"c",
5.6,
2
],
[
"css",
"ios",
6.3,
2
],
[
"node",
"Android",
0.6,
3
],
[
"node",
"css",
1.2,
3
],
[
"node",
"java",
7.7,
3
],
[
"node",
"html",
44.3,
3
],
[
"node",
"c++",
4,
3
],
[
"java",
"vue",
0.4,
4
],
[
"java",
"php",
16.4,
4
],
[
"java",
"node",
1.6,
4
],
[
"java",
"js",
24.9,
4
],
[
"java",
"c",
4.5,
4
],
[
"java",
"ios",
23.6,
4
],
[
"js",
"Android",
5.8,
5
],
[
"js",
"css",
0.5,
5
],
[
"js",
"java",
57.2,
5
],
[
"js",
"html",
7.5,
5
],
[
"js",
"c++",
5,
5
],
[
"html",
"vue",
0.4,
6
],
[
"html",
"php",
23.6,
6
],
[
"html",
"node",
6.6,
6
],
[
"html",
"js",
8.3,
6
],
[
"html",
"c",
5.5,
6
],
[
"html",
"ios",
14.6,
6
],
[
"c",
"Android",
2.5,
7
],
[
"c",
"css",
1.1,
7
],
[
"c",
"java",
7.9,
7
],
[
"c",
"html",
6.2,
7
],
[
"c",
"c++",
24.5,
7
],
[
"c++",
"vue",
0.3,
8
],
[
"c++",
"php",
16,
8
],
[
"c++",
"node",
1.5,
8
],
[
"c++",
"js",
8.8,
8
],
[
"c++",
"c",
15.9,
8
],
[
"c++",
"ios",
39.7,
8
],
[
"ios",
"Android",
5.9,
9
],
[
"ios",
"css",
0.4,
9
],
[
"ios",
"java",
19.8,
9
],
[
"ios",
"html",
5.1,
9
],
[
"ios",
"c++",
25.9,
9
],
[
"vue",
"php",
3.6,
1
],
[
"vue",
"node",
3,
1
],
[
"vue",
"js",
6.8,
1
],
[
"vue",
"c",
12.6,
1
],
[
"vue",
"ios",
4.9,
1
],
[
"php",
"vue",
0.7,
10
],
[
"php",
"node",
1.9,
10
],
[
"php",
"js",
5.2,
10
],
[
"php",
"c",
10.2,
10
],
[
"php",
"ios",
18.1,
10
],
[
"Android",
"css",
0.4,
11
],
[
"Android",
"java",
30.6,
11
],
[
"Android",
"html",
7.7,
11
],
[
"Android",
"c++",
3.3,
11
],
[
"css",
"Android",
1.9,
2
],
[
"css",
"java",
15.6,
2
],
[
"css",
"html",
3.9,
2
],
[
"css",
"c++",
8.1,
2
],
[
"node",
"vue",
1.4,
3
],
[
"node",
"php",
16.8,
3
],
[
"node",
"js",
6.1,
3
],
[
"node",
"c",
4,
3
],
[
"node",
"ios",
13.9,
3
],
[
"java",
"Android",
6.7,
4
],
[
"java",
"css",
1.6,
4
],
[
"java",
"html",
8.6,
4
],
[
"java",
"c++",
11.8,
4
],
[
"js",
"vue",
0.9,
5
],
[
"js",
"php",
4.6,
5
],
[
"js",
"node",
2.4,
5
],
[
"js",
"c",
2.1,
5
],
[
"js",
"ios",
14,
5
],
[
"html",
"Android",
5.9,
6
],
[
"html",
"css",
1.6,
6
],
[
"html",
"java",
29,
6
],
[
"html",
"c++",
4.4,
6
],
[
"c",
"vue",
0.4,
7
],
[
"c",
"php",
8.7,
7
],
[
"c",
"node",
2.4,
7
],
[
"c",
"js",
3.6,
7
],
[
"c",
"ios",
42.6,
7
],
[
"c++",
"Android",
1.5,
8
],
[
"c++",
"css",
1,
8
],
[
"c++",
"java",
11.5,
8
],
[
"c++",
"html",
3.8,
8
],
[
"ios",
"vue",
0.3,
9
],
[
"ios",
"php",
13.8,
9
],
[
"ios",
"node",
5.7,
9
],
[
"ios",
"js",
7.9,
9
],
[
"ios",
"c",
15.4,
9
]
],
// size:20, //默认是dataName的长度，size可自行设置，取值范围(x>=5||x<=20)
color: [
'#4CB7F2',
'#458FF0',
'#F5B751',
'#70C6A2',
'#70649A',
'#4F726C',
'#E58980',
'#BC9F77',
'#EDC7C7',
'#B55D4C',
'#69A8A0',
'#4CB7F2',
'#458FF0',
'#F5B751',
'#70C6A2',
'#B28ECC',
'#68A79F',
'#E58980',
'#BC9F77',
'#EDC7C7',
'#E19665',
'#8AA38A',
// '#B28FCE',
// '#6DA8C1',
// '#A4809D',
// '#7087B6',
// '#AAB06A',
// '#8AA38A',
// '#D0A28F',
// '#58AFA2',
// '#6FBC89',
] //颜色种类根据dataName长度定制
}
//////////////////////////////////////////////
var {
title,
dataName,
dataLink,
color
} = data
var le = data.size || dataName.length;
/////////////根据dataName的多上生成球的位置//////////////////
////////////具体位置还需要根据画布大小定制并进行微调/////////
if (le == 5) {
// dataName = [
// 'c1', 'c2', 'c3', 'c4', 'css',
// ];
var symbolSize = 54;
var xIndex = [
'100', '80', '120', '85', '115',
];
var yIndex = [
'80',
'95', '95',
'115', '115',
];
} else if (le == 6) {
// dataName = [
// 'c1', 'c2', 'c3', 'c4', 'css','c6'
// ];
var symbolSize = 55;
var xIndex = [
'100', '70', '130', '70', '130', '100',
];
var yIndex = [
'80',
'95', '95',
'120', '120',
'135',
];
} else if (le == 7) {
var symbolSize = 50;
// dataName = [
// 'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7'
// ];
var xIndex = [
'100', '60', '140', '50', '150', '75',
'125',
];
var yIndex = [
'55',
'75', '75',
'110', '110',
'145', '145',
];
} else if (le == 8) {
var symbolSize = 50;
// dataName = [
// 'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8'
// ];
var xIndex = [
'100', '60', '140', '40', '160', '60',
'140', '100',
];
var yIndex = [
'35',
'60', '60',
'100', '100',
'135', '135',
'155',
];
} else if (le == 9) {
var symbolSize = 44;
dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9'
];
var xIndex = [
'100', '40', '160', '15', '185', '40',
'100', '160', '100',
];
var yIndex = [
'18',
'45', '45',
'100', '100',
'150', '100', '150',
'180',
];
} else if (le == 10) {
var symbolSize = 44;
/* dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10',
];*/
var xIndex = [
'100', '40', '160', '15', '185', '40',
'100', '165', '75', '125',
];
var yIndex = [
'18',
'45', '45',
'100', '100',
'150', '100', '145',
'180', '180',
];
} else if (le == 11) {
var symbolSize = 43;
/* dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11',
// ];*/
var xIndex = [
'100', '40', '160', '15', '185', '40',
'70', '130', '165', '75', '125',
];
var xIndex = [
'110', '50', '170', '25', '195', '50',
'80', '140', '175', '85', '135',
];
var yIndex = [
'20',
'45', '45',
'100', '100',
'150', '100', '100', '150',
'180', '180',
];
} else if (le == 12) {
var symbolSize = 42;
/* dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11', 'c12',
];*/
// var xIndex = [
// '100', '40', '160', '15', '185', '70', '130', '40',
// '70', '130', '165', '100',
// ];
var xIndex = [
'110', '50', '170', '25', '195', '80', '140', '50',
'80', '140', '175', '110',
];
var yIndex = [
'15',
'45', '45',
'100', '100',
'80', '80',
'150', '120', '120', '150',
'180',
];
} else if (le == 13) {
var symbolSize = 40;
/* dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11', 'c12', 'c13',
];*/
var xIndex = [
'100', '40', '160', '15', '185', '70', '130', '40',
'70', '130', '165', '75', '125',
];
var yIndex = [
'15',
'45', '45',
'100', '100',
'80', '80',
'150', '120', '120', '145',
'180', '180',
];
} else if (le == 14) {
var symbolSize = 39;
/*dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11', 'c12', 'c13', 'c14',
];*/
var xIndex = [
'100', '40', '160', '15', '100', '185', '65', '135', '40',
'75', '125', '165', '75', '125',
];
var yIndex = [
'15',
'45', '45',
'100', '60', '100',
'85', '85',
'150', '130', '130', '145',
'180', '180',
];
} else if (le == 15) {
var symbolSize = 39;
/* dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11', 'c12', 'c13', 'c14', 'c15'
];*/
var xIndex = [
'100', '40', '160', '15', '100', '185', '65', '135', '40',
'60', '135', '165', '100', '75', '125',
];
var yIndex = [
'15',
'45', '45',
'100', '50', '100',
'80', '80',
'150', '120', '120', '145',
'150',
'180', '180',
];
} else if (le == 16) {
var symbolSize = 38;
/*dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11', 'c12', 'c13', 'c14', 'c15', 'c16',
];*/
var xIndex = [
'100', '40', '160', '15', '100', '185', '65', '135', '40',
'60', '100', '135', '165', '100', '75', '125',
];
var yIndex = [
'15',
'45', '45',
'100', '50', '100',
'80', '80',
'150', '120', '100', '120', '145',
'150',
'180', '180',
];
} else if (le == 17) {
var symbolSize = 36;
/*dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11', 'c12', 'c13', 'c14', 'c15', 'c16', 'c17',
];*/
var xIndex = [
'100', '40', '160', '15', '100', '185', '65', '135', '40',
'60', '100', '150', '165', '83', '123', '80', '130',
];
var yIndex = [
'15',
'45', '45',
'100', '50', '100',
'65', '65',
'150', '100', '100', '100', '145',
'140', '140',
'180', '180',
];
} else if (le == 18) {
var symbolSize = 36;
/* dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11', 'c12', 'c13', 'c14', 'c15', 'c16', 'c17', 'c18',
];*/
var xIndex = [
'100', '50', '150', '15', '100', '185', '65', '135', '15',
'50', '100', '150', '190', '83', '123', '50', '150', '100',
];
var yIndex = [
'10',
'25', '25',
'65', '50', '65',
'65', '65',
'120', '100', '100', '100', '120',
'140', '140',
'165', '165',
'185',
];
} else if (le == 19) {
var symbolSize = 35;
/* dataName = [
'c1', 'c2', 'c3', 'c4', 'css', 'c6', 'c7', 'c8', 'c9',
'c10', 'c11', 'c12', 'c13', 'c14', 'c15', 'c16', 'c17', 'c18',
'c19'
];*/
var xIndex = [
'100', '50', '150', '15', '100', '185', '65', '135', '10',
'50', '100', '150', '190', '83', '123', '35', '170', '75',
'130',
];
var yIndex = [
'10',
'25', '25',
'65', '50', '65',
'65', '65',
'110', '100', '100', '100', '110',
'140', '140',
'150', '150',
'180', '180',
];
}
if (le == 20) {
var symbolSize = 35;
var xIndex = [
'100', '50', '150', '15', '100', '185', '65', '135', '0',
'50', '100', '150', '200', '83', '123', '15', '185', '50',
'150', '100',
];
var yIndex = [
'0',
'15', '15',
'55', '50', '55',
'65', '65',
'100', '100', '100', '100', '100',
'140', '140',
'140', '140',
'175', '175',
'190',
];
}
/////////////////////////////////////////////////
function getDate() {
let _data = [];
for (var i = 0, le = dataName.length; i < le; i++) {
_data.push({
name: dataName[i],
x: xIndex[i],
y: yIndex[i],
itemStyle: {
normal: {
color: color[i],
}
},
label: {
normal: {
x: 'center',
y: 'center',
show: true,
textStyle: {
fontSize: '12',
fontWeight: '600',
lineHeight: '40',
color: '#000'
}
}
},
})
}
return _data;
}
function getLinks() {
let _data = [];
for (var i = 0, le = dataLink.length; i < le; i++) {
_data.push({
source: dataLink[i][0],
target: dataLink[i][1],
lineStyle: {
normal: {
opacity: 0.9,
width: dataLink[i][2] * (.1),
curveness: 0.3,
color: color[dataLink[i][3] - 1]
}
},
})
}
return _data;
}
option = {
title: {
text: title,
x: 'center',
y: '2%',
textStyle: {
color: '#333',
fontSize: '16',
fontWeight: 'normal',
top: '0',
},
},
// grid: {
// 'top': '8%'
// },
series: [{
type: 'graph',
layout: 'none',
symbolSize: symbolSize, //需要根据dataName多少进行调整
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'none'],
edgeSymbolSize: [0, 0],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data: getDate(),
links: getLinks(),
}]
};
截图如下
