/
jcci-result.html
82 lines (78 loc) · 2.56 KB
/
jcci-result.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JCCI Result</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div>Choose CCI Result File
<input type="file" id="datafile">
<!-- 展示方式-->
<!-- <select id="select">-->
<!-- <option value="tree">树形图</option>-->
<!-- <option value="graph">关系图</option>-->
<!-- </select>-->
</div>
<div id="main" style="width: 100%;height: 800px;"></div>
<script type="text/javascript">
var cciFile = document.getElementById('datafile');
var myChart = echarts.init(document.getElementById('main'));
var graphData = []
var graphLinks = []
var graphCategories = []
var optionGraph = {
tooltip: {},
legend: [
{
data: []
}
],
series: [
{
type: 'graph',
layout: 'none',
data: [],
links: [],
categories: [],
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
roam: true,
labelLayout: {
hideOverlap: true
},
lineStyle: {
color: 'source',
curveness: 0.3
}
}]
}
function readInputFile(event) {
let file = event.target.files[0];
if (!file) {
return;
}
let reader = new FileReader();
reader.addEventListener('load', event => {
let content = event.target.result;
let covertData = JSON.parse(content)
optionGraph.series[0].data = covertData.nodes
optionGraph.series[0].links = covertData.links
graphCategories = covertData.categories
optionGraph.series[0].categories = graphCategories
let graphLegend = graphCategories.map(function (a) {
return a.name;
})
optionGraph.legend[0].data = graphLegend
myChart.setOption(optionGraph);
})
reader.readAsText(file);
}
cciFile.addEventListener('change', readInputFile, false);
</script>
</body>
</html>