echarts 人员关系图
时间: 2023-11-03 09:52:31 浏览: 170
ECharts 是百度开源的一款数据可视化库,可以用来创建各种交互式的图表。ECharts 中也包含了人员关系图(graph)的功能,可以用来展示人员之间的关系网络。
要创建一个人员关系图,首先需要引入 ECharts 的库文件,并创建一个容器元素来放置图表。然后通过配置项来定义图表的样式和数据。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人员关系图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 800px; height: 600px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '人员关系图'
},
tooltip: {},
legend: {
data: ['人物']
},
series: [{
type: 'graph',
layout: 'force',
symbolSize: 50,
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 12
},
data: [{
name: 'Person A'
}, {
name: 'Person B'
}, {
name: 'Person C'
}],
links: [{
source: 'Person A',
target: 'Person B'
}, {
source: 'Person B',
target: 'Person C'
}],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}]
};
chart.setOption(option);
</script>
</body>
</html>
```
在上面的代码中,我们创建了一个人员关系图,包含了三个人物(Person A、Person B、Person C)。人物之间的关系通过 links 数组来定义,每个链接包含了源节点和目标节点。通过调整配置项中的参数,可以进一步定制图表的样式和功能。
以上只是一个简单的示例,实际使用中可以根据需要进行更复杂的配置和数据处理。你可以根据自己的需求来修改代码,以实现你想要的人员关系图效果。
阅读全文