正文

轻松掌握echarts，人物关系图谱制作全攻略，一看就会

/0 浏览量
0405

在数字化时代，数据可视化成为信息传达的重要手段。ECharts 是一款使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松制作各种图表，包括人物关系图谱。下面，我将带你一步步了解如何使用 ECharts 制作人物关系图谱。

了解人物关系图谱

人物关系图谱是一种展示人物之间关系的图表，它可以帮助我们快速了解复杂的人物网络。在制作人物关系图谱时，我们需要准备以下信息：

  • 人物列表：包括每个人的姓名、照片等基本信息。
  • 关系列表：包括人物之间的关系，如父子、夫妻、朋友等。
  • 节点属性：为每个节点添加额外的属性，如职业、年龄等。

准备数据

在开始制作人物关系图谱之前，我们需要准备数据。以下是一个简单的数据示例：

var data = {
    nodes: [
        {name: '张三', symbolSize: 30, itemStyle: {color: '#5470C6'}},
        {name: '李四', symbolSize: 30, itemStyle: {color: '#91C7AE'}},
        {name: '王五', symbolSize: 30, itemStyle: {color: '#D7273F'}},
        {name: '赵六', symbolSize: 30, itemStyle: {color: '#27727B'}},
        {name: '钱七', symbolSize: 30, itemStyle: {color: '#FE8463'}},
        {name: '孙八', symbolSize: 30, itemStyle: {color: '#9A60B4'}}
    ],
    links: [
        {source: '张三', target: '李四', lineStyle: {color: '#5470C6'}},
        {source: '李四', target: '王五', lineStyle: {color: '#91C7AE'}},
        {source: '王五', target: '赵六', lineStyle: {color: '#D7273F'}},
        {source: '赵六', target: '钱七', lineStyle: {color: '#27727B'}},
        {source: '钱七', target: '孙八', lineStyle: {color: '#FE8463'}},
        {source: '孙八', target: '张三', lineStyle: {color: '#9A60B4'}}
    ]
};

使用 ECharts 制作人物关系图谱

  1. 引入 ECharts 库
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
  1. 创建图表容器
<div id="main" style="width: 600px;height:400px;"></div>
  1. 初始化图表实例
var myChart = echarts.init(document.getElementById('main'));
  1. 设置图表配置项和数据
var option = {
    series: [
        {
            type: 'graph',
            layout: 'none',
            data: data.nodes,
            links: data.links,
            lineStyle: {
                color: 'source',
                opacity: 0.9,
                width: 1.5,
                curveness: 0
            },
            label: {
                show: true,
                position: 'right',
                formatter: '{b}'
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeSymbolRotate: 30,
            edgeLabel: {
                fontSize: 20
            }
        }
    ]
};
  1. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

总结

通过以上步骤，我们可以轻松使用 ECharts 制作人物关系图谱。在实际应用中，可以根据需求调整节点大小、颜色、线条样式等属性，使图表更加美观和易于理解。希望这篇文章能帮助你快速掌握 ECharts 人物关系图谱制作技巧。

-- 展开阅读全文 --