使用Echarts绘制名侦探柯南人物关系图

前言

  《名侦探柯南绯色的子弹》就要上映了,npy想要和我一起去看,但是她又搞不懂人物关系,所以就用Echarts做一个柯南的人物关系表了解一下。
  ECharts是使用JavaScript实现的开源可视化库,可以做出很多精巧的图片,最初由百度团队开源,后于2018年初捐赠给Apache基金会,成为ASF孵化级项目。

步骤

  1. 引入jqueryecharts的js文件
1
2
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
  1. 获取人物关系json文件
      json文件中主要分为3部分,分别是nodes表示人物,links表示关系连接,categories表示阵营/类别。
  • nodes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
// 必填,二选一
"id": "0", // 人物id
"name": "柯南", // 人物名称
// 选填
"symbolSize": 50, // 点的大小
"value": 100, // 力引导布局(force)中连线长度
"category": 0, // 人物类别
"itemStyle": { // 自定义样式
"normal": {
"color": "blue"
}
}
}
  • links
1
2
3
4
5
6
7
8
{
// 必填
"source": "1", // 源节点名称或者id
"target": "0", // 目标节点名称或者id
// 选填
"value": 100, // 力引导布局(force)中连线长度
"name": "伙伴" // 关系名称
}
  • categories
1
2
3
4
5
6
7
{
// 必填
"name": "黑衣组织", // 类别名称
// 选填
"symbol": "circle", // 类目节点标记的图形
"symbolSize": 10, // 类目节点的默认大小
}
  1. 配置前端
1
<div id="conan_container"></div>
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
var conan = echarts.init(document.getElementById("conan_container"));
var option;
conan.showLoading();
$.getJSON('https://cdn.jsdelivr.net/gh/YiHui-Liu/Fox-Home-CDN/Detective-Conan.json', function (graph) {
conan.hideLoading();
option = {
// 图表标题与位置
title: {
text: 'Detective Conan',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
// selectedMode: 'single',
data: graph.categories.map(function (a) {
return a.name;
})
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
name: 'Detective Conan',
type: 'graph',
// 布局,none使用节点中提供的x、y作为节点的位置;circular采用环形布局;force采用力引导布局
layout: 'circular',
data: graph.nodes,
links: graph.links,
categories: graph.categories,
symbolSize: 15,
value: 30,
roam: true,
label: {
show: true,
position: 'right',
formatter: '{b}'
},
labelLayout: {
hideOverlap: true
},
lineStyle: {
color: 'source',
curveness: 0.3
},
// 突出显示有连接的人物
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
},
// 缩放限制
scaleLimit: {
min: 0.6,
max: 3
}
// 显示links的名称
// edgeSymbolSize: [4, 10],
// edgeLabel: {
// show: true,
// formatter: function (x) {
// return x.data.name;
// },
// textStyle: {
// fontSize: 20
// }
// },
// 力引导布局的设置
// force: {
// repulsion: 2500,
// edgeLength: [10, 50]
// },
}
]
};
conan.setOption(option);
});
if (option && typeof option === 'object') {
conan.setOption(option);
}

效果展示

参考资料

  1. 人物关系图谱:ECharts 实现
  2. Echarts文档
  3. Echarts示例