Echarts绘制关系图（知识图谱可视化）
1. 前⾔
正在做知识图谱，以前可视化⽤的是D3，因为D3不是太会，⽽且D3学习成本⽐较⾼，所以改⽤Echarts，Echarts做出来的关系图还是挺好的。
2. 关系图实例
样例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>ECharts 关系图</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" ></div>
<script type="text/javascript">
var myChart = echarts.ElementById('main'));
var categories = [];
for (var i = 0; i < 2; i++) {
categories[i] = {
name: '类⽬' + i
};
}
option = {
// 图的标题
title: {
text: 'ECharts 关系图'
},
// 提⽰框的配置
tooltip: {
formatter: function (x) {
setoption
return x.data.des;
}
},
/
/ ⼯具箱
toolbox: {
// 显⽰⼯具箱
show: true,
feature: {
mark: {
show: true
},
// 还原
restore: {
show: true
},
// 保存为图⽚
saveAsImage: {
show: true
}
}
},
legend: [{
// selectedMode: 'single',
data: categories.map(function (a) {
return a.name;
})
}],
series: [{
type: 'graph', // 类型：关系图
layout: 'force', //图的布局，类型为⼒导图
symbolSize: 40, // 调整节点的⼤⼩
roam: true, // 是否开启⿏标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都
edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [2, 10], edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
force: {
repulsion: 2500, edgeLength: [10, 50]
},
draggable: true, lineStyle: {
normal: {
width: 2,
color: '#4b565b',
}
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) { return x.data.name;
}
}
},
label: {
normal: {
show: true,
textStyle: {}
}
},
// 数据
data: [{
name: 'node01',
des: 'nodedes01', symbolSize: 70, category: 0,
}, {
name: 'node02',
des: 'nodedes02', symbolSize: 50, category: 1,
}, {
name: 'node03',
des: 'nodedes3', symbolSize: 50, category: 1,
}, {
name: 'node04',
des: 'nodedes04', symbolSize: 50, category: 1,
}, {
name: 'node05',
des: 'nodedes05', symbolSize: 50, category: 1,
}],
links: [{
source: 'node01',
target: 'node02',
name: 'link01',
des: 'link01des'
source: 'node01', target: 'node03',
name: 'link02',
des: 'link02des'
}, {
source: 'node01', target: 'node04',
name: 'link03',
des: 'link03des'
}, {
source: 'node01', target: 'node05',
name: 'link04',
des: 'link05des'
}],
categories: categories, }]
};
myChart.setOption(option); </script>
</body>
</html>
运⾏截图如下：
点击类⽬ 0 ，如下所⽰：点击类⽬1，如下所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。