-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgraph-template.html
117 lines (112 loc) · 7.85 KB
/
graph-template.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=graph&code=LYTwwgFghgTgLgOgM4QPYHcAyqoBMCWAdgOYAUAlANwBQAJAsQKZwBSAygPIBypAShxwAqAfQAKAQUEAJAAQBqGQHIA9LihwoyqEiTNV6zQBtGSALTB8umFABGxpAgBWSVIUUAaGQDMAroQDGcPiuMqTCxNYADhDkMgDe1DIyoJCwiBD4uIzYeERkVIkyxnAyEVDRMgC88YVJAESEqFlIdQBcMgDatUk9CT39Aw1QwIxtMnUAogBijOo-MIwAsuV17t0DPXWZY5MzcwvLkXXrPQC-axtJfZf9QyM7ExyRjNZBrqsnG1u4D08v6sFCMcbudPjUbrdCMNRu1JrwTKh5v5RhcIfVtrCJvCXEjRmDQTdrmi7jDxliEbi2MwPmj0T9MdjETBkVS4MDLgTLkSISSHqlrIEXhwbI5GIEabTvnzoAK4EKRWK2fjURtuTdeZiJphLGyVTyMWStTr2RtOaqwZDoXzDNokPgvPgXhLiQbJmAbTp7Y6YCaBmaBmrLhqyVMoIFUDAQM79fSQ2G4BGo8qwYGvlD7pi2HAYHlBKgszmSIcJoRs1G9erXRMC7n89m8sXS5Hff1_f1U4N06TJlxobgJsYRqXo5XYz2-wPGEOlSCK70LZsuw9sCQR0GqyviC2znOrgv6kvMVNDDhdfvxlXj6ft0k2_PaeNDyGT-phaLxbvBpeX3A34qbzId57g-waTCwUAAG5QO6tprl8VbgVBME6ABQHgpKT6TIICyMAAknKrwRnBX5jhM2GMHhBHqERyaEueoHVtmPiBPMUCGHscDzCi9FVgWzGcdY7GzAJeKzim9GYRMABCIBysRtxVjJcm0VyElWpif4fjxpGaTOHKfh2loZmS_LyZsVamSp5ogZJm66WZdLLq4xD2VZAZqcZkwAOKMIQLz4P4gggM8DkXqRPl-TmgXBaJ-niTZ6lklJ-DELhpaMEwPqfgppHJal6WZahBked2EwACIGEFIXZeZpEVRoVWxaaxUJZ5EzIS0NWOZiHVFfFGGJZMaVypl9ldWFDzDRl8rvnpzX9cSkmNf2g6-WeIFVstk7Tn1dGtaVeVlWK-DAGxoVSpih3Hadhi7ap-0PGViJ2NxG11c9xh3dZA1tWlEGoP4AKuIIsBMHAEwAB7IpEbxAuNF1kn9ANA4QIMwGDkPQ7DX3uQ9mZoPA528QTc1-i1P2lYhUBjdpDxU65Yl7RTDxKYw4gwNY5a05dslsxzUBJoz93M5m9arvDvFi1ubntiVDwlj4wBE6RCtKzL94i2SohhgA1lATDKw82v-HrBvq8BmuTOIhCNBo2MS6R1u2yjOOy3jZKNdr1gjARhuYp7sDQr75voYtg0TKr_wJll3OGoQitRzRQvfWHbWq9qVG3Q78vx8AGf_LdIeGYu4eszTb0s7zDNxUzqeleIcD1jYPhydnmIN03LdNWTC08pJ9WvZKVYD67Gt149H2MOXQ_vT4L3V_Ntd9-HXtB06bda4HPtOkXcuXagqDGFAhDTy6uUH0fJ8KuKu_u7swlcY2ZZ-yGD8HOUJbP7flvSRfsxw7HSYUk_7H1Hhbce-MIy_mvutGeDw2AkwXj3Je6pJLwi8C8XyyIX5wkYBghYARu6tnJhAskZV8D60aEgII_hUhEBweVChxAqE0LoUCb-pDJiHAYdwjhy82qLCaIwQw201o8KESI1aw4-GoPDsNBh8j8TdAALp6jqIYIgOsWjtC6CgoMGh0bUkxIIrIkipxiPhgsfBWCTBjA6HUNmhhDBsB8M8GAjUWiqPojiZkpU_ivEBOdQGMACBQg0XAKM7QACMMj9GgyMR7GKK1zHDksXgzBhDtGdHPLcRgLi3EeNCrk8QTj8kvEKeeLxIEfHYI0m4l28NgmhLYvgCJYwABMsSvgGLBg8XsIxkk7TSdYzJdiHElOca48pMVPHwxqX4-p9t6JNKIC0tp0SumDB6QkrhEjRGpPolYjJyIsn2McZMgpMy6hVMlPM60tovTr2WbAZp4TIkyBicnXGkptlskxP0xggyLGHPSQQk5dicmbDyVM9xVzxrFNKTCipD4bnEjuT1D0doHRPJAissJrT3mdK-W7H58S_lkhMcI_ZsDiRHLBbYnRkL6jQsuc8TqTLxjnLKbCtlAF-iop5OiuM4ZmyNJeast5HTNm3F-Q8SlZihkgpGeCxlD4EUXOmby-FULuXItpAK9UQrxwDOpUE8V-L1kyCJTXYWxJZXGL2VImlPI6U2NOeMxFrLbEGqDEaxiMB-KsSEvsQexI8VrPeZ8m1KceT2sSc8IFByQKutGaqtVzKJm6rhRyhxWbeWVLmUyWpZI-IsUEhxLiZqQkSoJVK4lY9Y1kr6ROJ150U0qs6B6jVPLvWFtxPApiZa2IVoWFW15taNn1vAY2wx5K3SYseTHZNoK3UQvTRmz1mrbHauZXm2xBbvFFtKvVKAjUx01stdaxetqZ29P-S2lJzr1TtoZZ2rlSKrk-q-H6k9Z6xXVotZG6Vmw427NMaa4ZxzX1nMzR-3lX7Bg_sqjFc9gGxhRuvTG9UoGJjyog0qqD7r31etmYe_tGLYL_vHZajDyCb3YabRRz02Kl2ShfacnNxGt3svXZyvdLQD3VKPfclCVGL2EuA_UHDALE1PqDOxsZXGe2kaE-RkymLUMRvQ5J8YOG8Otsg_SojsGSPXL7b4h4W0DPPIA1pyd0bvl2sY2SGT-Hl3Kug5xkz3Gik6rg_ulF5ni1YSSW5yU4bJXtCvXRrDcTZ3NpNdZ9zhHFPeeU2ZsjFnNS5005Fj5Om6g4d_Shwzq603pq7fx3zu7_MCcC5l4LEcctibQ1FgrenHWPrbSu1Nb60uFIQ7cP1qtcsTvy1O0Ot6dntQXSx7rHnjObvS4NzYw3ms2eo0BibxcpPOeNYCsLtKesdt0eu3NtXqucv61cwTtzhOYmNqbUNPIItjei8Q3uDH4sOvA0ltjx3oOVYuyt-ofrHv62e-qV7NH2t7dw51xVyWjNrrO0pwpO6-MXdu2i-7ZInaoDtoElrdmrWw--y5h9iP_sLZRxVllPmMdA9M9jwVuOQvPFXtvVjYbzUk_ezuT7cW70UoR8CpHZW-tLYG0F0qAdvbMBxeF3neXaMfb0d0uH-muuld6zBqXn6Zc50VvnQSo2YfbfotJynYvqcpfK2q87pnGdo5u_V1TWW47G9aQXM3EmLcgQ6797XBHkc6KZz5kH4w_UdxzM3VuG3xPaf96S8n-3ZPzbt5L7t0uGv10brHruvuk8OZJU51P_rA3lrfpD-TAOOO8cdwzrz-v81u7u2pq2-f8Bx5r18aHfuS8Nq-8L9nB2_tHZp2Hl38HDfty7z3ov9nMOOam3O-HQeqcT8z3r7PBvc9Gy3gr7nL3ldjdVwL9XWy4dWeD-L3XnGqvO-u63_Vs_N7y99sTvL_PbwkNXwlsfW_W3UPLPKrSPOoMHQ_T_BPVrcbQfadYfabUtASYdavDPEA07OnR_ZvXfF_NEcAv1dBKDRfUnZPMvEfdfKlcfF1OvVLFvXtffBkAHEg8_X_QXDXcvVzag59WgqfZ_Bg93RrIg-lFgsnCgm_TfGgyfUA4HN_XBDzUQkEFRagU4GgQoMoaIBARoZoBALwCMCYMMCAUgXwAIWGUIbQxgWIbkCwhAG0GwYRKoSbJIFADAdoJiRgboVQwoU4AoJIVAGGQERw7kIIOAYwdoQMOUCGOAdoRQCYfwCMRgGQeVDwE4JAOeSI6IpQI6LwKAHwQwEoG0EAREOAFIjYBMSIGImwAnBMYAUogYYwLwTIxQHMYgCAEozwvUBMQ-IICo-If0ZQZQIoaaQgXAe3AYhtcY_ocY3QYwQUXASlGIu0EgYwOopISYnoNQDQdoDQiABAQGEaCMR0BwU6SIYwvwQIQI0gKAKw7odY_oBYASQgGQKALQ6EGgKYwY1scgW4z4wCH4mQAVY-E6FGMqViWGaJAAVgAAYoS9QgTTpYYDCljiAABVSITYxgGIgARx8CIBoTSg4BblWJkCsCOPtwQJ6C7BiMwBMCSMsH-BeiQGJP6AiWeBiJ2OZI2OsGIGIFsDCJkHcM_EKOKJiL0N8U5KSE2KgG2KiF2IsKQCFM0SQBlPKF2I0UIC0U_H2IykOJMBVM0O1OIF1IVLBDFORHCIXEBSYBpJIDgAgCixhJqgWEiDyLtFcAdNhIXDKAggJXaChIQChIhJDhgBwGADcIDUYCFNsGEQtLREiFQDtHBKUBaLaIlJ6DFIRIIhiLiBsFOEUBDnVLyQiX5OLniJPBgEWKPTTKSH8HmAgl8hMGVJkH9IAGYQ4pxohtBLBYyIQ9DaymzFA8BHAwwsEQBqyigiAiyQASzzx0BMg7TokoSFxTglFTRlDbx3jkhwAZREBdBfwAjXBSB_DYYCgfDKAgA
⚠ Please be aware that this chart is not an official demo of Apache ECharts but is made by user-generated code.
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/jquery"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
let graph = ${graph};
graph.nodes.forEach(function (node) {
node.label = {
show: true
};
});
option = {
title: {
text: '${title}',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [
{
// selectedMode: 'single',
data: graph.categories.map(function (a) {
return a.name;
})
}
],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
name: '${title}',
type: 'graph',
draggable: true,
layout: 'force',
data: graph.nodes,
links: graph.links,
categories: graph.categories,
force: {
edgeLength: 200,
repulsion: 200,
gravity: 0.1
},
roam: true,
label: {
position: 'right',
formatter: '{b}'
},
tooltip: {
formatter: function(arg) { return arg.data.description; }
},
lineStyle: {
color: 'source',
curveness: 0.0
},
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
}
}
]
};
myChart.setOption(option);
// if (option && typeof option === 'object') {
// myChart.setOption(option);
// }
myChart.on('click', function(params) {
if (params.data.link) {
window.open(params.data.link, "_self");
} else if (params.data.externalLink) {
window.open(params.data.externalLink);
}
});
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>