折腾日志 | 使用Echarts绘制名侦探柯南人物关系图

发表于2021-04-09更新于2022-01-30字数统计841阅读次数

前言

《名侦探柯南绯色的子弹》就要上映了，npy想要和我一起去看，但是她又搞不懂人物关系，所以就用Echarts做一个柯南的人物关系表了解一下。

ECharts是使用JavaScript实现的开源可视化库，可以做出很多精巧的图片，最初由百度团队开源，后于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

步骤

  1. 引入jquery和echarts的js文件
1
2
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@v3.6.0/dist/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://asset.foolishfox.cn/files/2021/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示例