1. 前端Demo
<!DOCTYPE html>
<html>
<head>
<title>力导图</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: '学校'},
{name: '属性'},
{name: '其他'}
]
// 配置项
var option = {
// 标题设置
title: {
// 主标题
text: '学校',
// 副标题
subtext: '西安电子科技大学力导图',
// 位置
top: 'top',
left: 'left'
},
// 提示框设置
tooltip: {
// 关闭提示框
show: false
},
// 图例设置
legend: [{
// 纵向
orient: 'vertical',
// 位置
left: 'right',
// 图例内容，由上面的分类集合决定
data: categories.map(function (a) {
return a.name;
})
}],
// 数据设置
series: [{
// 类型
type: 'graph',
// 力导图布局
layout: 'force',
// 开启平移与缩放
roam: true,
// 标签设置
label: {
normal: {
// 是否展示
show: true,
// 展示位置
position: 'top',
// 展示内容
// formatter: '{b}',
// 文本设置
textStyle: {
// 文本大小
fontSize: '12rem'
},
}
},
// 根据value放缩节点
symbolSize: (value, params) => {
return value;
},
// 是否可拖拽
draggable: true,
// 节点数据
data:[
{
// 分类
category: '学校',
// 名称
name: "西安电子科技大学",
// 值，越大则节点越大
value:50
},
{
category: '属性',
name: "《与共和国同行》",
value:30
},
{
category: '属性',
name: "杨宗凯",
value:30
},
{
category: 0,
name: "西北工业大学",
value:50
},
],
// 分类
categories: categories,
force: {
edgeLength: 200,
repulsion: 300,
// gravity: 0.1
},
// 关系
links:[
{
// 源节点
source: "西安电子科技大学",
// 目标节点
target: "《与共和国同行》",
// 标签设置
label: {
normal: {
// 是否展示
show: true,
// 展示内容
formatter: '校歌'
}
}
},
{
source: "西安电子科技大学",
target: "杨宗凯",
label: {
normal: {
show: true,
formatter: '校长'
}
}
},
{
source: "西安电子科技大学",
target: "西北工业大学",
label: {
normal: {
show: true,
formatter: '兄弟院校'
}
}
}
],
}]
};
myChart.setOption(option);
</script>
</body>
</html>
2. 效果图
image.png
3. 推荐后端返回数据格式
{
"code": 200,
"msg": "成功",
"data": {
// 标题
"title": "西电",
// 副标题
"subtext": "西安电子科技大学力导图",
// 分类集合
"categories": [
"学校",
"属性",
"其他"
],
// 节点集合
"nodes": [
{
// 分类，同分类同色
"category": "学校",
// 节点名
"name": "西安电子科技大学",
// 节点大小，值越大节点越大
"value": 50
},
{
"category": "属性",
"name": "《与共和国同行》",
"value": 30
},
{
"category": "学校",
"name": "西北工业大学",
"value": 50
}
],
// 关系集合
"edges": [
{
// 源节点
"source": "西安电子科技大学",
// 目标节点
"target": "《与共和国同行》",
// 源节点与目标节点连线上的内容
"value": "校歌"
},
{
"source": "西安电子科技大学",
"target": "西北工业大学",
"value": "兄弟院校"
}
]
}
}
