正文

掌握ECharts，轻松绘制人物关系图，图片案例教学

/0 浏览量
0407

了解ECharts

ECharts是一个使用JavaScript实现的开源可视化库，它提供了一系列丰富的图表类型，如折线图、柱状图、饼图、地图等。通过ECharts，我们可以轻松地将数据可视化，使得数据更加直观易懂。

人物关系图简介

人物关系图是一种展示人物之间关系的图表，通常用于家族谱系、组织结构、社交网络等领域。在人物关系图中，节点代表人物，边代表人物之间的关系。

ECharts绘制人物关系图

1. 准备工作

首先，你需要引入ECharts库。可以通过CDN链接或者下载ECharts的压缩包来实现。

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

2. 创建图表容器

在HTML中创建一个用于显示图表的容器。

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

3. 配置图表

在JavaScript中，创建一个ECharts实例，并配置图表的选项。

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

var option = {
    series: [{
        type: 'graph',
        layout: 'none',
        data: [
            {name: '张三', itemStyle: {color: '#f56c6c'}},
            {name: '李四', itemStyle: {color: '#f39c12'}},
            {name: '王五', itemStyle: {color: '#13cdd1'}},
            {name: '张三', symbolSize: 50},
            {name: '李四', symbolSize: 50},
            {name: '王五', symbolSize: 50},
            {name: '张三', label: {position: 'right', formatter: '{b} (朋友)'}},
            {name: '李四', label: {position: 'right', formatter: '{b} (同事)'}},
            {name: '王五', label: {position: 'right', formatter: '{b} (亲戚)'}},
            {name: '张三', edgeSymbol: ['circle', 'arrow'], edgeSymbolSize: [4, 10], edgeLabel: {show: true, formatter: '关系'}},
            {name: '李四', symbol: 'circle', symbolSize: 50},
            {name: '王五', symbol: 'circle', symbolSize: 50},
            {name: '张三', category: 0},
            {name: '李四', category: 1},
            {name: '王五', category: 2},
            {name: '关系', symbolSize: 10, itemStyle: {color: '#f56c6c'}},
            {name: '朋友', symbolSize: 10, itemStyle: {color: '#f39c12'}},
            {name: '同事', symbolSize: 10, itemStyle: {color: '#13cdd1'}},
            {name: '亲戚', symbolSize: 10, itemStyle: {color: '#13cdd1'}}
        ],
        edges: [
            {source: '张三', target: '李四', symbol: ['circle', 'arrow'], symbolSize: [4, 10], label: {show: true, formatter: '朋友'}},
            {source: '张三', target: '王五', symbol: ['circle', 'arrow'], symbolSize: [4, 10], label: {show: true, formatter: '亲戚'}},
            {source: '李四', target: '王五', symbol: ['circle', 'arrow'], symbolSize: [4, 10], label: {show: true, formatter: '同事'}}
        ],
        categories: [
            {
                name: '朋友',
                itemStyle: {
                    color: '#f39c12'
                }
            },
            {
                name: '同事',
                itemStyle: {
                    color: '#13cdd1'
                }
            },
            {
                name: '亲戚',
                itemStyle: {
                    color: '#13cdd1'
                }
            }
        ],
        roam: true,
        label: {
            position: 'right',
            formatter: '{b}'
        },
        lineStyle: {
            color: '#f56c6c'
        }
    }]
};

myChart.setOption(option);

4. 保存并预览

将上述代码保存为HTML文件，并在浏览器中打开。你将看到一个包含张三、李四、王五三人及其关系的人物关系图。

总结

通过本文的介绍，你现在已经学会了如何使用ECharts绘制人物关系图。在实际应用中，你可以根据自己的需求调整图表的样式和配置，使其更加美观和实用。

-- 展开阅读全文 --