ECharts.js 是一个基于 JavaScript 的开源可视化库,用于创建各种图表和数据可视化。人物关系图(也称为社交网络图或网络图)是 ECharts.js 中的一种特殊图表类型,用于展示个体之间的关系,如社交网络中的朋友关系、家族树、组织结构等。
人物关系图通过节点(Node)和边(Edge)来表示个体及其之间的关系。节点通常代表一个人或实体,而边则表示这些个体之间的联系。
以下是一个简单的 ECharts.js 人物关系图的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>ECharts 人物关系图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
series: [{
type: 'graph',
layout: 'force',
data: [
{name: 'Alice', value: 10},
{name: 'Bob', value: 20},
{name: 'Charlie', value: 30}
],
links: [
{source: 'Alice', target: 'Bob'},
{source: 'Bob', target: 'Charlie'},
{source: 'Charlie', target: 'Alice'}
],
roam: true,
label: {
show: true
},
force: {
repulsion: 100
}
}]
};
myChart.setOption(option);
</script>
</body>
</html>
force.repulsion
值或尝试不同的布局算法(如 circular
或 grid
)。通过以上信息,你应该能够了解 ECharts.js 中人物关系图的基础概念、优势、应用场景以及常见问题的解决方法。