1 .前言
虽然制作了知识地图，但是以前使用D3进行可视化，但是由于D3不太会，D3的学习成本很高，所以变更为Echarts、Echarts制作的关系图还不错。 javascript
2 .关系图例
示例代码以下： html
ECharts关系图varmychart=e charts.init (document.getelementbyid (' main ' ) )；
var categories=[]；
for(varI=0； i 2； I ) {
categories[i]={
名称： '类别' I
(；
}
选项={
//图标题
title: {
text: 'ECharts关系图'
(，
//配置提示框
tooltip: {
formatter 3360功能(x ) {
return x.data.des；
}
(，
//工具箱
工具箱： {
//显示工具箱
show :真，
功能： {
zydxn: {
show :真
(，
//恢复
restore: {
show :真
(，
//另存为图像
另存为image : {
show :真
}
}
(，
legend: [{
//选择模式： ' single '，
data : categories.map (功能(a ) )
return a.name；
() )
()、
series: [{
类型： ' graph '，//类型：的关系图
layout: 'force '，//图布局，类型为力图
调整symbolSize: 40，//节点大小
roam: true，//是否打开鼠标缩放和平移。 默认值未打开。 如果只想打开缩放或平移，可以将其设置为“scale”或“move”。 将true全部设置为on
edgeSymbol: ['circle '，' arrow']，
edgesymbolsize : [ 2，10 ]，
Edge标签： {
正常： {
文本样式： {
fontSize: 20
}
}
(，
force: {
repulsion: 2500，
边缘长度： [ 10，50 ]
(，
draggable: true，
线样式： {
正常： {
width: 2，
color: '#4b565b '，
}
(，
Edge标签： {
正常： {
show :真，
formatter 3360功能(x ) {
return x.data.name；
}
}
(，
标签： {
正常： {
show :真，
文本样式： { }
}
(，
//数据
data: [{
name: 'node01 '，
des: 'nodedes01 '，
symbolSize: 70，
类别： 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 '，
目标： '节点02 '，
name: 'link01 '，
des: 'link01des '
、{
source: 'node01 '，
目标： '节点03 '，
name: 'link02 '，
des: 'link02des '
、{
source: 'node01 '，
目标： '节点04 '，
name: 'link03 '，
des: 'link03des '
、{
source: 'node01 '，
目标： '节点05 '，
name: 'link04 '，
des: 'link05des '
()、
categories: categories，
() ) ]
(；
mychart.setoption(option；
截图以下： java
点击类别0，如下所示。 节点
点击类别1，如下所示。 jquery