关系图 (Graph)

2024-10-12
作者小卒子
~6.95 K字

ECharts 关系图 (Graph) 的使用详解

ECharts 提供的关系图（Graph）是一种非常强大的数据可视化工具，适合展示节点和连线之间的关系网络。它在社交网络分析、知识图谱展示、设备拓扑结构等场景中得到了广泛的应用。本文将详细介绍如何使用 ECharts 绘制关系图，掌握节点的大小、连线的颜色、力导向布局等配置，并提供多个详细的示例代码，帮助你理解并灵活应用。

一、ECharts 关系图的核心概念

关系图通过节点（node）和边（edge）展示网络中的各个元素和它们之间的连接。其常用的布局方式为力导向布局，即节点之间的距离和连线的张力可以根据某些规则自动调整，呈现出一种动态的平衡。

1. 基础配置结构

ECharts 关系图的配置主要通过 series 中的 type 设置为 "graph" 来实现。下面是一个最基本的关系图配置示例：

var option = {
    tooltip: {},
    series: [
        {
            type: 'graph',
            layout: 'force',
            data: [
                {name: '节点1', value: 10},
                {name: '节点2', value: 20},
                {name: '节点3', value: 30}
            ],
            links: [
                {source: '节点1', target: '节点2'},
                {source: '节点2', target: '节点3'}
            ],
            roam: true, // 开启缩放和平移功能
            label: {
                show: true,
                position: 'right'
            },
            force: {
                repulsion: 1000
            }
        }
    ]
};

在这个基础结构中：

data：包含了关系图的节点，每个节点可以设置 name 和 value 等属性。
links：定义了节点之间的关系，source 表示起点，target 表示终点。
layout：设置为 force 表示使用力导向布局。
roam：开启鼠标缩放和平移功能，使用户能够更灵活地操作图表。

二、绘制简单关系图

接下来我们将从绘制一个简单的关系图开始。

1. HTML 结构

首先，我们需要一个 div 容器来承载我们的 ECharts 图表：

<div id="graphChart" style="width: 800px; height: 600px;"></div>

2. 关系图的 JavaScript 配置

然后，在 JavaScript 中使用 ECharts 的图表配置来渲染关系图：

var graphChart = echarts.init(document.getElementById('graphChart'));

var option = {
    tooltip: {
        formatter: function (params) {
            return `${params.data.name}: ${params.data.value}`;
        }
    },
    series: [
        {
            type: 'graph',
            layout: 'force',
            data: [
                {name: 'Node A', value: 10},
                {name: 'Node B', value: 15},
                {name: 'Node C', value: 20}
            ],
            links: [
                {source: 'Node A', target: 'Node B'},
                {source: 'Node B', target: 'Node C'}
            ],
            roam: true,
            label: {
                show: true,
                position: 'right'
            },
            force: {
                repulsion: 1000
            }
        }
    ]
};

graphChart.setOption(option);

3. 完整的 HTML 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 关系图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <h1>ECharts 关系图示例</h1>
    <div id="graphChart" style="width: 800px; height: 600px;"></div>

    <script>
        var graphChart = echarts.init(document.getElementById('graphChart'));

        var option = {
            tooltip: {
                formatter: function (params) {
                    return `${params.data.name}: ${params.data.value}`;
                }
            },
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    data: [
                        {name: 'Node A', value: 10},
                        {name: 'Node B', value: 15},
                        {name: 'Node C', value: 20}
                    ],
                    links: [
                        {source: 'Node A', target: 'Node B'},
                        {source: 'Node B', target: 'Node C'}
                    ],
                    roam: true,
                    label: {
                        show: true,
                        position: 'right'
                    },
                    force: {
                        repulsion: 1000
                    }
                }
            ]
        };

        graphChart.setOption(option);
    </script>
</body>
</html>

三、配置节点大小、连线颜色和布局

关系图的灵活性在于可以对节点、连线、布局等进行细致的控制。

1. 节点大小和样式

通过 symbolSize 可以控制节点的大小，itemStyle 则可以控制节点的颜色等样式：

var option = {
    series: [
        {
            type: 'graph',
            layout: 'force',
            data: [
                {name: 'Node A', value: 10, symbolSize: 50, itemStyle: {color: 'red'}},
                {name: 'Node B', value: 15, symbolSize: 30, itemStyle: {color: 'blue'}},
                {name: 'Node C', value: 20, symbolSize: 40, itemStyle: {color: 'green'}}
            ],
            links: [
                {source: 'Node A', target: 'Node B'},
                {source: 'Node B', target: 'Node C'}
            ],
            label: {
                show: true
            },
            force: {
                repulsion: 1000
            }
        }
    ]
};

在这个配置中：

symbolSize：定义了每个节点的大小。
itemStyle：为每个节点设置了不同的颜色。

2. 连线的样式

通过 lineStyle 可以控制连线的颜色、宽度和类型：

var option = {
    series: [
        {
            type: 'graph',
            layout: 'force',
            data: [
                {name: 'Node A', value: 10},
                {name: 'Node B', value: 15},
                {name: 'Node C', value: 20}
            ],
            links: [
                {source: 'Node A', target: 'Node B', lineStyle: {color: 'red', width: 2}},
                {source: 'Node B', target: 'Node C', lineStyle: {color: 'blue', width: 4}}
            ],
            label: {
                show: true
            },
            force: {
                repulsion: 1000
            }
        }
    ]
};

在这个配置中，lineStyle 为不同的连线设置了颜色和宽度。

3. 力导向布局

力导向布局通过模拟物理弹簧系统，使节点在画布中自动排列。可以通过 force 属性来配置节点之间的排斥力和引力：

var option = {
    series: [
        {
            type: 'graph',
            layout: 'force',
            force: {
                repulsion: 2000,  // 节点之间的排斥力，数值越大节点距离越远
                edgeLength: [50, 200], // 连线的长度范围
                gravity: 0.1  // 引力系数，越大节点越靠近
            },
            data: [
                {name: 'Node A', value: 10},
                {name: 'Node B', value: 15},
                {name: 'Node C', value: 20}
            ],
            links: [
                {source: 'Node A', target: 'Node B'},
                {source: 'Node B', target: 'Node C'}
            ],
            label: {
                show: true
            }
        }
    ]
};

通过配置 force 中的 repulsion、edgeLength 和 gravity，可以调整节点之间的距离和连线的长度，使布局更加自然和合理。

四、结合其他组件的使用

1. 鼠标交互效果

ECharts 允许我们为关系图设置交互效果，比如点击节点时高亮、显示数据或其他动态效果。

graphChart.on('click', function (params) {
    console.log(params.data.name + ': ' + params.data.value);
});

通过监听 click 事件，可以实现节点的交互效果。

添加图例和工具栏

为了更好地展示关系图，还可以结合其他组件，如工具栏和图例：

toolbox: {
    feature: {
        dataView: { show: true, readOnly: false },
        saveAsImage: { show: true }
    }
}

五、总结

本文详细介绍了如何使用 ECharts 关系图展示节点和连线之间的关系，涵盖了从基本图表绘制到节点大小、连线颜色以及力导向布局的详细配置。通过这些配置，ECharts 可以帮助我们实现复杂的数据关系展示，为社交网络分析、设备拓扑结构等应用场景提供了极大的便利。

希望本文的示例和讲解能帮助你掌握 ECharts 关系图的使用。如果在实际应用中有更多复杂场景，可以尝试结合其他图表类型和组件，进一步增强图表的交互性和表现力。

小卒子