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" style="width:1000px;height:800px"></div>
<script type="text/javascript">
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);
</script>
</body>
</html>
運行截圖如下：
點擊 類目 0 ， 如下所示：
點擊 類目1，如下所示：
