实现知识图谱可视化采取的开源库是echarts。相对其他工具来说,echarts是百度开源工具,API封装完善,简单好用,易上手。这也是我们为什么选择echarts作工具的原因。
实现步骤:
- 获取echarts,引入到项目中
npm install echarts --save
import * as echarts from 'echarts';
2.初始化
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<div id="main" style="width: 600px;height:400px;"></div>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '图谱示例'
},
tooltip: {},
series: [{
...
data: [],
links:[]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
3.配置
知识图谱要将实体与实体,本体与本体之间的关系可视化。根据业务需求,我们选取echarts关系图
const options = {
tooltip: {
formatter: function (x) {
return x.data.name;
},
},
series: [
{
type: 'graph',
layout: 'force',
legendHoverLink: false, //是否启用图例 hover(悬停) 时的联动高亮。
// hoverAnimation: true, //是否开启鼠标悬停节点的显示动画
roam: true,
draggable: true, //每个节点的拖拉
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
force: {
repulsion: 1550,
gravity: 0.5, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
edgeLength: [120, 240],
},
draggable: true,
focusNodeAdjacency: true,
lineStyle: {
normal: {
width: 2,
},
},
edgeLabel: {
normal: {
show: true,
formatter: function (x) {
return x.value;
},
},
},
label: {
normal: {
show: true,
position: 'inside',
textStyle: {
color: '#000',
fontSize: 12,
},
},
},
data: [],
links: [],
},
],
};
4.数据处理
后台返回的数据有这种:
也有这种:
不管哪种,显然不符合我们前端需要的数据。所以我们需要把数据处理成我们想要的数据:
5.注意事项
处理数据时我们要注意,节点和节点的关系要对应,否则无法渲染出来;
数据量大时,echarts的节点颜色无法自动显示,解决办法一是在和series同级的地方增加属性color
color: ["#7EC0EE", "#FF9F7F", "#FFD700", "#C9C9C9", "#E066FF", "#C0FF3E"]
但有时这种办法也没有办法完全解决,可采用另一种方法:
const colorList = [
'#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
'#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
]
const colorListLen = colorList.length;
....
state.nodeNames.map(nodeName => {
state.nodes.push({
name: nodeName,
symbolSize: Math.random() * 40 + 30,
itemStyle:{
color:colorList[Math.floor(Math.random()*colorListLen)]
}
});
});
6.缺陷
虽然echarts基本满足可视化要求,但是在数据量较大时,会出现渲染较慢,浏览器卡顿的情况。一般我们的解决方案时分片渲染。然而遗憾的是,分片渲染echarts只支持限定的几个图表类型,这是官网的描述:
- 目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有:ECharts 基础版本的 散点图(scatter) 和 线图(lines)。ECharts GL 的 散点图(scatterGL)、线图(linesGL) 和 可视化建筑群(polygons3D)。
所以这也是比较遗憾和后续有待改进的地方。