1. 前言
正在作知識圖譜 ，之前可視化用的是D3，由於D3不是太會，並且D3學習成本比較高，因此改用Echarts，Echarts作出來的關係圖仍是挺好的。javascript
2. 關係圖實例
樣例代碼以下：html
<!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>
運行截圖以下：java
點擊 類目 0 ， 以下所示：node
點擊 類目1，以下所示：jquery
https://blog.csdn.net/qq_38737992/article/details/89042164echarts