1. 前端Demo
<!DOCTYPE html>
<html>
<head>
<title>力導(dǎo)圖</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:600px"></div>
<script type="text/javascript">
// 初始化折砸，如果你的容器id為main的<div></div>
var myChart = echarts.init(
document.getElementById('main')
)
// 分類集合
var categories = [
{name: '學(xué)校'},
{name: '屬性'},
{name: '其他'}
]
// 配置項(xiàng)
var option = {
// 標(biāo)題設(shè)置
title: {
// 主標(biāo)題
text: '學(xué)校',
// 副標(biāo)題
subtext: '西安電子科技大學(xué)力導(dǎo)圖',
// 位置
top: 'top',
left: 'left'
},
// 提示框設(shè)置
tooltip: {
// 關(guān)閉提示框
show: false
},
// 圖例設(shè)置
legend: [{
// 縱向
orient: 'vertical',
// 位置
left: 'right',
// 圖例內(nèi)容预侯，由上面的分類集合決定
data: categories.map(function (a) {
return a.name;
})
}],
// 數(shù)據(jù)設(shè)置
series: [{
// 類型
type: 'graph',
// 力導(dǎo)圖布局
layout: 'force',
// 開(kāi)啟平移與縮放
roam: true,
// 標(biāo)簽設(shè)置
label: {
normal: {
// 是否展示
show: true,
// 展示位置
position: 'top',
// 展示內(nèi)容
// formatter: '冀墨',
// 文本設(shè)置
textStyle: {
// 文本大小
fontSize: '12rem'
},
}
},
// 根據(jù)value放縮節(jié)點(diǎn)
symbolSize: (value, params) => {
return value;
},
// 是否可拖拽
draggable: true,
// 節(jié)點(diǎn)數(shù)據(jù)
data:[
{
// 分類
category: '學(xué)校',
// 名稱
name: "西安電子科技大學(xué)",
// 值面氓，越大則節(jié)點(diǎn)越大
value:50
},
{
category: '屬性',
name: "《與共和國(guó)同行》",
value:30
},
{
category: '屬性',
name: "楊宗凱",
value:30
},
{
category: 0,
name: "西北工業(yè)大學(xué)",
value:50
},
],
// 分類
categories: categories,
force: {
edgeLength: 200,
repulsion: 300,
// gravity: 0.1
},
// 關(guān)系
links:[
{
// 源節(jié)點(diǎn)
source: "西安電子科技大學(xué)",
// 目標(biāo)節(jié)點(diǎn)
target: "《與共和國(guó)同行》",
// 標(biāo)簽設(shè)置
label: {
normal: {
// 是否展示
show: true,
// 展示內(nèi)容
formatter: '校歌'
}
}
},
{
source: "西安電子科技大學(xué)",
target: "楊宗凱",
label: {
normal: {
show: true,
formatter: '校長(zhǎng)'
}
}
},
{
source: "西安電子科技大學(xué)",
target: "西北工業(yè)大學(xué)",
label: {
normal: {
show: true,
formatter: '兄弟院校'
}
}
}
],
}]
};
myChart.setOption(option);
</script>
</body>
</html>
2. 效果圖
image.png
3. 推薦后端返回?cái)?shù)據(jù)格式
{
"code": 200,
"msg": "成功",
"data": {
// 標(biāo)題
"title": "西電",
// 副標(biāo)題
"subtext": "西安電子科技大學(xué)力導(dǎo)圖",
// 分類集合
"categories": [
"學(xué)校",
"屬性",
"其他"
],
// 節(jié)點(diǎn)集合
"nodes": [
{
// 分類，同分類同色
"category": "學(xué)校",
// 節(jié)點(diǎn)名
"name": "西安電子科技大學(xué)",
// 節(jié)點(diǎn)大小蒸播，值越大節(jié)點(diǎn)越大
"value": 50
},
{
"category": "屬性",
"name": "《與共和國(guó)同行》",
"value": 30
},
{
"category": "學(xué)校",
"name": "西北工業(yè)大學(xué)",
"value": 50
}
],
// 關(guān)系集合
"edges": [
{
// 源節(jié)點(diǎn)
"source": "西安電子科技大學(xué)",
// 目標(biāo)節(jié)點(diǎn)
"target": "《與共和國(guó)同行》",
// 源節(jié)點(diǎn)與目標(biāo)節(jié)點(diǎn)連線上的內(nèi)容
"value": "校歌"
},
{
"source": "西安電子科技大學(xué)",
"target": "西北工業(yè)大學(xué)",
"value": "兄弟院校"
}
]
}
}
