echarts实现人物关系力导向图

Echarts是一个基于JavaScript的可视化库，可以用来展示各种图表，包括力导向图。在Echarts中，力导向图可以用来展示不同节点之间的关系。

要实现人物关系力导向图，需要先准备好数据。数据应该包含每个人物的名称、ID以及其与其他人物之间的关系。可以用JSON格式来表示数据，如下所示：

{
    "nodes": [
        {"id": "1", "name": "张三"},
        {"id": "2", "name": "李四"},
        {"id": "3", "name": "王五"},
        {"id": "4", "name": "赵六"},
        {"id": "5", "name": "钱七"},
        {"id": "6", "name": "孙八"}
    ],
    "links": [
        {"source": "1", "target": "2"},
        {"source": "1", "target": "3"},
        {"source": "2", "target": "4"},
        {"source": "3", "target": "4"},
        {"source": "4", "target": "5"},
        {"source": "4", "target": "6"}
    ]
}

上面的数据表示了6个人物之间的关系，其中节点表示人物，links表示人物之间的关系。source和target表示连接的两个节点的ID。

接下来，我们需要使用Echarts来展示这个力导向图。首先，需要引入Echarts的库文件：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

然后，创建一个<div>元素，并给它一个ID，作为图表的容器：

<div id="chart" style="width: 600px; height: 400px;"></div>

接下来，使用JavaScript代码来绘制力导向图：

var myChart = echarts.init(document.getElementById('chart'));

var option = {
    series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 50,
        roam: true,
        label: {
            show: true
        },
        data: data.nodes,
        links: data.links,
        force: {
            repulsion: 1000,
            edgeLength: 50
        }
    }]
};

myChart.setOption(option);

上面的代码中，首先创建了一个Echarts实例，并指定了图表的容器。然后，定义了一个option对象，其中包含了力导向图的各种参数。其中，type为'graph'表示是一个力导向图，layout为'force'表示使用力导向布局，symbolSize表示节点的大小，roam表示开启拖拽和缩放功能，label为节点的标签，data和links分别表示节点和边的数据，force表示力导向布局的参数，repulsion表示节点之间的斥力，edgeLength表示边的长度。

最后，使用setOption方法将option应用到图表中，即可显示人物关系力导向图。