正文

学会echarts制作人物关系图：轻松显示节点与绘制技巧

/0 浏览量
0405

引言

人物关系图是一种直观展示人物之间关系的图表。ECharts是一个使用JavaScript编写的开源可视化库，可以轻松实现各种复杂的图表。在这篇文章中，我们将学习如何使用ECharts制作人物关系图，包括节点的显示和绘制技巧。

节点显示技巧

1. 节点样式

在ECharts中，可以通过symbolSize属性设置节点的大小，通过symbol属性设置节点的形状。以下是一个简单的示例代码：

option = {
    series: [{
        type: 'graph',
        layout: 'none',
        symbolSize: 50,
        data: [{
            name: '节点1',
            x: 100,
            y: 100
        }, {
            name: '节点2',
            x: 300,
            y: 100
        }],
        edges: [{
            source: '节点1',
            target: '节点2'
        }]
    }]
};

在这个例子中，我们设置了节点的大小为50，并且使用了圆形作为节点形状。

2. 节点标签

通过label属性可以为节点添加标签，显示节点的名称或其他信息。以下是一个示例代码：

option = {
    series: [{
        type: 'graph',
        layout: 'none',
        symbolSize: 50,
        data: [{
            name: '节点1',
            x: 100,
            y: 100,
            label: {
                show: true,
                position: 'top',
                formatter: '节点1'
            }
        }, {
            name: '节点2',
            x: 300,
            y: 100,
            label: {
                show: true,
                position: 'top',
                formatter: '节点2'
            }
        }],
        edges: [{
            source: '节点1',
            target: '节点2'
        }]
    }]
};

在这个例子中，我们为每个节点添加了一个标签，并且将其位置设置为顶部。

绘制技巧

1. 节点布局

ECharts提供了多种布局方式，例如力导向布局、网格布局等。以下是一个使用力导向布局的示例代码：

option = {
    series: [{
        type: 'graph',
        layout: 'force',
        symbolSize: 50,
        data: [{
            name: '节点1',
            x: 100,
            y: 100
        }, {
            name: '节点2',
            x: 300,
            y: 100
        }],
        edges: [{
            source: '节点1',
            target: '节点2'
        }]
    }]
};

在这个例子中，我们使用了力导向布局，使得节点之间相互吸引和排斥，形成了一个有组织的结构。

2. 线条样式

ECharts提供了多种线条样式，例如实线、虚线、点线等。以下是一个示例代码：

option = {
    series: [{
        type: 'graph',
        layout: 'none',
        symbolSize: 50,
        data: [{
            name: '节点1',
            x: 100,
            y: 100
        }, {
            name: '节点2',
            x: 300,
            y: 100
        }],
        edges: [{
            source: '节点1',
            target: '节点2',
            lineStyle: {
                color: 'source',
                width: 2,
                type: 'dashed'
            }
        }]
    }]
};

在这个例子中，我们使用了虚线来表示节点之间的连接，并且设置了线条的宽度为2。

总结

通过学习本文，你现在可以轻松使用ECharts制作人物关系图了。你可以通过调整节点样式、标签、布局和线条样式来创建个性化的图表。希望这篇文章对你有所帮助！

-- 展开阅读全文 --