1. 前言

正在作知识图谱 ，之前可视化用的是D3，由于D3不是太会，并且D3学习成本比较高，因此改用Echarts，Echarts作出来的关系图仍是挺好的。javascript

2. 关系图实例

样例代码以下：html

var myChart = echarts.init(document.getElementById('main'));

var categories = [];

for (var i = 0; i < 2; i++) {

categories[i] = {

name: '类目' + i

};

}

option = {

// 图的标题

title: {

text: 'ECharts 关系图'

},

// 提示框的配置

tooltip: {

formatter: function (x) {

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);

运行截图以下：java

点击 类目 0 ， 以下所示：node

点击 类目1，以下所示：jquery