-
Notifications
You must be signed in to change notification settings - Fork 4
/
relationChart.html
74 lines (73 loc) · 1.97 KB
/
relationChart.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Relation Chart</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
<style>
.container {
display: flex;
flex-wrap: wrap;
max-width: 1200px;
margin: auto;
}
.left-panel {
flex: 1;
min-width: 300px;
padding: 10px;
}
.right-panel {
flex: 2;
padding: 10px;
overflow-y: auto;
max-height: 750px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<img src="your_image_source.png" style="width: 100%; height: auto" />
<div id="relationChart" style="width: 100%; height: 400px"></div>
</div>
<div class="right-panel">
<!-- 在这里插入格式化的文本描述 -->
<p>这里是文本描述，可以根据需要进行填充。</p>
</div>
</div>
<script>
window.onload = function () {
setTimeout(() => {
const relationChart = echarts.init(
document.getElementById("relationChart")
);
const option = {
series: [
{
type: "graph",
layout: "force",
data: [{ name: "节点1" }, { name: "节点2" }],
links: [{ source: "节点1", target: "节点2" }],
roam: true,
label: { show: true, position: "right" },
force: {
repulsion: 1000,
},
},
],
};
relationChart.setOption(option);
setTimeout(() => {
relationChart.resize();
}, 200);
}, 0);
};
</script>
</body>
</html>