导语：
由于浏览器安全限制，浏览器并不能直接访问电脑本地文件，因此我在代码中访问本地json数据文件，直接打开HTML文件是不行的。我这里使用了VS code中的插件——Live Server，具体的用法可以参考vscode下关于Live Server的使用
，在点击右下角的Go Live后即可自动跳转浏览器。项目完整文件见人工智能——知识图谱表示法——使用Echarts关系图展示《红楼梦》人物关系图谱
效果图
代码：
<!DOCTYPE html>
<html style="height: 100%" lang="zh-CN">
<head>
<title>人工智能第二次作业——知识图谱</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
$.ajaxSetup({ async: false });//异步
var myChart = echarts.init(document.getElementById("container"));
var app = {};
var option;
myChart.showLoading();
var rela = { "data": [], "links": [] };
$.getJSON(\'./honglou.json\', function (json) {/*由于浏览器无法跨域访问本地的json文件，因此我采用了VS code的Live Server插件来模仿服务器请求*/
rela = json;
});
myChart.hideLoading();
option = {
// backgroundColor: "white",
title: {
text: \'红楼梦人物关系图谱\',
textStyle: {
// color: "white",
fontWeight: "lighter",
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: \'quinticInOut\',
legend: {
x: "center",
show: true,
data: ["贾家荣国府", "贾家宁国府", "王家", "史家", "薛家", "其他", "林家"]
},
series: [
{
type: \'graph\',
layout: \'circular\',
symbolSize: 45,
edgeSymbol: [\'circle\', \'arrow\'],
edgeSymbolSize: [4, 4],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
force: {
repulsion: 2500,
edgeLength: [10, 100]
},
focusNodeAdjacency: true,
draggable: true,
roam: true,
categories: [{
name: \'贾家荣国府\',
// itemStyle: {
// normal: {
// color: "#009800",
// }
// }
}, {
name: \'贾家宁国府\',
// itemStyle: {
// normal: {
// color: "#4592FF",
// }
// }
}, {
name: \'王家\',
// itemStyle: {
// normal: {
// color: "#3592F",
// }
// }
},
{
name: \'史家\',
}, {
name: \'薛家\',
}, {
name: \'其他\',
},
{
name: \'林家\',
}
],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
force: {
repulsion: 1000
},
tooltip: {
formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
if (!node.value) {
return node.data.name;
} else {
return node.data.name + ":" + node.data.showNum;
}
},
},
lineStyle: {
normal: {
opacity: 0.9,
width: 1,
curveness: 0.3
}
},
// progressiveThreshold: 700,
nodes: rela.data.map(function (node, idx) {
node.id = idx;
return node;
}),
links: rela.links,
}
]
};
myChart.setOption(option, true);
if (option && typeof option === \'object\') {
myChart.setOption(option);
}
</script>
</body>
</html>
使用到的json数据
{"data": [{"name": "贾雨村", "category": 5}, {"name": "贾琏", "category": 0}, {"name": "王夫人", "category": 2}, {"name": "林之孝家的", "category": 5}, {"name": "甄应嘉", "category": 5}, {"name": "秦可卿", "category": 1}, {"name": "芳官", "category": 0}, {"name": "李纨", "category": 0}, {"name": "夏金桂", "category": 4}, {"name": "柳五儿", "category": 0}, {"name": "贾珠", "category": 0}, {"name": "四儿", "category": 0}, {"name": "贾珍", "category": 1}, {"name": "茗烟", "category": 0}, {"name": "贾蓉", "category": 1}, {"name": "薛蝌", "category": 4}, {"name": "坠儿", "category": 0}, {"name": "贾环", "category": 0}, {"name": "赖尚荣", "category": 5}, {"name": "贾宝玉", "category": 0}, {"name": "甄士隐", "category": 5}, {"name": "马道婆", "category": 5}, {"name": "贾政", "category": 0}, {"name": "尤三姐", "category": 1}, {"name": "秦钟", "category": 5}, {"name": "王熙凤", "category": 2}, {"name": "袭人", "category": 0}, {"name": "刘姥姥", "category": 5}, {"name": "王狗儿", "category": 5}, {"name": "入画", "category": 1}, {"name": "林红玉", "category": 5}, {"name": "周瑞家的", "category": 5}, {"name": "贾敬", "category": 1}, {"name": "孙绍祖", "category": 5}, {"name": "贾惜春", "category": 1}, {"name": "傻大姐", "category": 5}, {"name": "晴雯", "category": 0}, {"name": "李嬷嬷", "category": 5}, {"name": "贾代化", "category": 1}, {"name": "林如海", "category": 6}, {"name": "甄宝玉", "category": 5}, {"name": "秋桐", "category": 0}, {"name": "金文翔家的", "category": 5}, {"name": "鸳鸯", "category": 0}, {"name": "冷子兴", "category": 5}, {"name": "薛蟠", "category": 4}, {"name": "焦大", "category": 1}, {"name": "宝珠", "category": 1}, {"name": "吴贵", "category": 5}, {"name": "佩凤", "category": 1}, {"name": "龄官", "category": 5}, {"name": "莺儿 黄金莺", "category": 5}, {"name": "贾敏", "category": 0}, {"name": "瑞珠", "category": 1}, {"name": "尤氏继母", "category": 1}, {"name": "娇杏", "category": 5}, {"name": "薛宝钗", "category": 4}, {"name": "邢夫人", "category": 0}, {"name": "薛姨妈", "category": 2}, {"name": "林黛玉", "category": 6}, {"name": "秦邦业", "category": 5}, {"name": "藕官", "category": 5}, {"name": "王善保家的", "category": 5}, {"name": "贾探春", "category": 0}, {"name": "薛宝琴", "category": 4}, {"name": "麝月", "category": 0}, {"name": "贾演", "category": 1}, {"name": "贾迎春", "category": 0}, {"name": "妙玉", "category": 5}, {"name": "玉钏儿", "category": 0}, {"name": "秋纹", "category": 0}, {"name": "智能儿", "category": 5}, {"name": "王子腾", "category": 2}, {"name": "柳湘莲", "category": 5}, {"name": "金钏儿", "category": 0}, {"name": "尤氏", "category": 1}, {"name": "邢岫烟", "category": 5}, {"name": "香菱", "category": 5}, {"name": "贾源", "category": 0}, {"name": "贾元春", "category": 0}, {"name": "赵姨娘", "category": 0}, {"name": "邢忠", "category": 5}, {"name": "史湘云", "category": 3}, {"name": "雪雁", "category": 0}, {"name": "紫鹃 鹦哥", "category": 0}, {"name": "金文翔", "category": 5}, {"name": "彩云", "category": 0}, {"name": "贾母", "category": 3}, {"name": "贾代善", "category": 0}, {"name": "巧姐", "category": 0}, {"name": "赖大", "category": 1}, {"name": "尤二姐", "category": 1}, {"name": "林之孝", "category": 5}, {"name": "封肃", "category": 5}, {"name": "香菱 甄英莲", "category": 5}, {"name": "宝蟾", "category": 5}, {"name": "彩霞", "category": 0}, {"name": "李贵", "category": 5}, {"name": "药官", "category": 5}, {"name": "赖嬷嬷", "category": 5}, {"name": "蒋玉菡", "category": 5}, {"name": "金钏", "category": 0}, {"name": "贾兰", "category": 0}, {"name": "贾蔷", "category": 1}, {"name": "偕鸾", "category": 1}, {"name": "贾赦", "category": 0}], "links": [{"source": 72, "target": 25, "value": "伯父"}, {"source": 51, "target": 56, "value": "丫头"}, {"source": 0, "target": 59, "value": "老师"}, {"source": 35, "target": 87, "value": "丫头"}, {"source": 50, "target": 103, "value": "相好"}, {"source": 61, "target": 59, "value": "丫环"}, {"source": 61, "target": 98, "value": "相好"}, {"source": 99, "target": 90, "value": "母亲"}, {"source": 18, "target": 99, "value": "孙子"}, {"source": 48, "target": 36, "value": "姑舅哥哥"}, {"source": 45, "target": 58, "value": "儿子"}, {"source": 15, "target": 58, "value": "侄儿"}, {"source": 76, "target": 57, "value": "侄女"}, {"source": 76, "target": 81, "value": "女儿"}, {"source": 76, "target": 15, "value": "妻"}, {"source": 64, "target": 15, "value": "胞妹"}, {"source": 64, "target": 58, "value": "侄女"}, {"source": 8, "target": 45, "value": "妻"}, {"source": 94, "target": 45, "value": "妾"}, {"source": 77, "target": 20, "value": "女儿"}, {"source": 20, "target": 77, "value": "父亲"}, {"source": 95, "target": 8, "value": "陪房丫头"}, {"source": 80, "target": 63, "value": "母亲"}, {"source": 80, "target": 17, "value": "母亲"}, {"source": 80, "target": 22, "value": "妾"}, {"source": 58, "target": 64, "value": "姑母"}, {"source": 58, "target": 45, "value": "母亲"}, {"source": 58, "target": 2, "value": "姐妹"}, {"source": 101, "target": 2, "value": "大丫环"}, {"source": 86, "target": 2, "value": "大丫头"}, {"source": 96, "target": 2, "value": "大丫头"}, {"source": 69, "target": 2, "value": "丫头"}, {"source": 69, "target": 74, "value": "妹妹"}, {"source": 74, "target": 69, "value": "姐姐"}, {"source": 10, "target": 19, "value": "哥哥"}, {"source": 10, "target": 7, "value": "丈夫"}, {"source": 10, "target": 22, "value": "长子"}, {"source": 10, "target": 2, "value": "长子"}, {"source": 7, "target": 19, "value": "嫂子"}, {"source": 7, "target": 10, "value": "妻"}, {"source": 102, "target": 7, "value": "儿子"}, {"source": 102, "target": 10, "value": "儿子"}, {"source": 79, "target": 2, "value": "长女"}, {"source": 79, "target": 22, "value": "长女"}, {"source": 19, "target": 59, "value": "表兄妹"}, {"source": 19, "target": 56, "value": "丈夫"}, {"source": 19, "target": 2, "value": "次子"}, {"source": 19, "target": 22, "value": "次子"}, {"source": 56, "target": 58, "value": "女儿"}, {"source": 56, "target": 19, "value": "妻"}, {"source": 26, "target": 19, "value": "丫环"}, {"source": 65, "target": 19, "value": "丫环"}, {"source": 70, "target": 19, "value": "丫环"}, {"source": 36, "target": 19, "value": "丫环"}, {"source": 16, "target": 19, "value": "丫环"}, {"source": 11, "target": 19, "value": "丫环"}, {"source": 9, "target": 19, "value": "丫环"}, {"source": 9, "target": 6, "value": "好朋友"}, {"source": 6, "target": 19, "value": "丫环"}, {"source": 13, "target": 19, "value": "小厮"}, {"source": 17, "target": 80, "value": "儿子"}, {"source": 17, "target": 22, "value": "儿子"}, {"source": 63, "target": 80, "value": "女儿"}, {"source": 63, "target": 22, "value": "女儿"}, {"source": 103, "target": 12, "value": "养子"}, {"source": 85, "target": 87, "value": "买办"}, {"source": 85, "target": 43, "value": "哥哥"}, {"source": 42, "target": 43, "value": "嫂子"}, {"source": 31, "target": 2, "value": "陪房"}, {"source": 62, "target": 57, "value": "陪房"}, {"source": 55, "target": 0, "value": "二夫人"}, {"source": 93, "target": 20, "value": "岳父"}, {"source": 40, "target": 4, "value": "儿子"}, {"source": 68, "target": 19, "value": "朋友"}, {"source": 68, "target": 59, "value": "朋友"}, {"source": 73, "target": 45, "value": "好兄弟"}, {"source": 100, "target": 26, "value": "夫妻"}, {"source": 100, "target": 19, "value": "好友"}, {"source": 44, "target": 0, "value": "好友"}, {"source": 44, "target": 31, "value": "女婿"}, {"source": 21, "target": 19, "value": "乾娘"}, {"source": 71, "target": 24, "value": "暧昧"}, {"source": 24, "target": 60, "value": "儿子"}, {"source": 23, "target": 91, "value": "妹妹"}, {"source": 23, "target": 91, "value": "妹妹"}, {"source": 23, "target": 54, "value": "女儿"}, {"source": 60, "target": 5, "value": "养父"}, {"source": 60, "target": 24, "value": "父亲"}, {"source": 82, "target": 87, "value": "孙女"}, {"source": 82, "target": 56, "value": "朋友"}, {"source": 82, "target": 59, "value": "朋友"}, {"source": 82, "target": 19, "value": "朋友"}, {"source": 66, "target": 78, "value": "兄弟"}, {"source": 66, "target": 46, "value": "主人"}, {"source": 66, "target": 38, "value": "父亲"}, {"source": 38, "target": 32, "value": "父亲"}, {"source": 38, "target": 66, "value": "儿子"}, {"source": 32, "target": 12, "value": "父亲"}, {"source": 32, "target": 38, "value": "儿子"}, {"source": 46, "target": 66, "value": "老奴"}, {"source": 12, "target": 34, "value": "父亲"}, {"source": 12, "target": 14, "value": "父亲"}, {"source": 12, "target": 75, "value": "丈夫"}, {"source": 12, "target": 32, "value": "儿子"}, {"source": 75, "target": 34, "value": "母亲"}, {"source": 75, "target": 12, "value": "妻"}, {"source": 49, "target": 12, "value": "妾"}, {"source": 104, "target": 12, "value": "妾"}, {"source": 14, "target": 5, "value": "丈夫"}, {"source": 14, "target": 12, "value": "儿子"}, {"source": 5, "target": 14, "value": "妻"}, {"source": 53, "target": 5, "value": "丫环"}, {"source": 47, "target": 5, "value": "丫环"}, {"source": 29, "target": 34, "value": "丫环"}, {"source": 34, "target": 75, "value": "女儿"}, {"source": 34, "target": 12, "value": "女儿"}, {"source": 78, "target": 88, "value": "父亲"}, {"source": 88, "target": 105, "value": "父亲"}, {"source": 88, "target": 22, "value": "父亲"}, {"source": 88, "target": 87, "value": "丈夫"}, {"source": 88, "target": 78, "value": "儿子"}, {"source": 87, "target": 59, "value": "外祖母"}, {"source": 87, "target": 57, "value": "婆婆"}, {"source": 87, "target": 105, "value": "母亲"}, {"source": 87, "target": 88, "value": "妻"}, {"source": 22, "target": 105, "value": "兄弟"}, {"source": 22, "target": 63, "value": "父亲"}, {"source": 22, "target": 17, "value": "父亲"}, {"source": 22, "target": 19, "value": "父亲"}, {"source": 22, "target": 79, "value": "父亲"}, {"source": 22, "target": 10, "value": "父亲"}, {"source": 22, "target": 2, "value": "丈夫"}, {"source": 22, "target": 87, "value": "次子"}, {"source": 22, "target": 88, "value": "儿子"}, {"source": 105, "target": 67, "value": "父亲"}, {"source": 105, "target": 1, "value": "父亲"}, {"source": 105, "target": 57, "value": "丈夫"}, {"source": 105, "target": 87, "value": "大儿子"}, {"source": 105, "target": 88, "value": "儿子"}, {"source": 57, "target": 25, "value": "婆婆"}, {"source": 57, "target": 87, "value": "大儿媳"}, {"source": 57, "target": 105, "value": "妻"}, {"source": 2, "target": 19, "value": "母亲"}, {"source": 2, "target": 79, "value": "母亲"}, {"source": 2, "target": 10, "value": "母亲"}, {"source": 2, "target": 58, "value": "姐妹"}, {"source": 2, "target": 22, "value": "妻"}, {"source": 2, "target": 87, "value": "小儿媳"}, {"source": 43, "target": 87, "value": "丫头"}, {"source": 39, "target": 59, "value": "父亲"}, {"source": 39, "target": 52, "value": "丈夫"}, {"source": 52, "target": 105, "value": "兄妹"}, {"source": 52, "target": 22, "value": "兄妹"}, {"source": 52, "target": 87, "value": "女儿"}, {"source": 52, "target": 59, "value": "母亲"}, {"source": 52, "target": 39, "value": "妻"}, {"source": 59, "target": 19, "value": "表兄妹"}, {"source": 59, "target": 87, "value": "外孙女"}, {"source": 59, "target": 39, "value": "女儿"}, {"source": 84, "target": 87, "value": "丫头"}, {"source": 83, "target": 59, "value": "丫头"}, {"source": 25, "target": 2, "value": "内侄女"}, {"source": 25, "target": 89, "value": "母亲"}, {"source": 25, "target": 1, "value": "妻"}, {"source": 25, "target": 57, "value": "儿媳"}, {"source": 41, "target": 105, "value": "妾"}, {"source": 41, "target": 105, "value": "丫环"}, {"source": 1, "target": 89, "value": "父亲"}, {"source": 1, "target": 25, "value": "丈夫"}, {"source": 1, "target": 105, "value": "儿子"}, {"source": 67, "target": 33, "value": "妻"}, {"source": 67, "target": 105, "value": "女儿"}, {"source": 89, "target": 27, "value": "被抚养"}, {"source": 89, "target": 1, "value": "女儿"}, {"source": 89, "target": 25, "value": "女儿"}, {"source": 27, "target": 28, "value": "岳母"}, {"source": 91, "target": 1, "value": "二房"}, {"source": 91, "target": 54, "value": "女儿"}, {"source": 92, "target": 30, "value": "父"}, {"source": 3, "target": 30, "value": "母"}, {"source": 37, "target": 97, "value": "母"}, {"source": 37, "target": 19, "value": "乳母"}]}