ECharts 实现人民的名义关系图谱代码开源

最新推荐文章于 2025-09-22 00:00:00 发布

原创

最新推荐文章于 2025-09-22 00:00:00 发布 · 4.7k 阅读

13 ·

CC 4.0 BY-SA版权

本文介绍了如何使用ECharts创建关系图谱，包括设置series的type为graph，选择force布局，配置tooltip和data，以及定义关系。提供完整代码示例，并分享了Github仓库和在线演示链接，适合需要在web上展示关系图的开发者参考。

1、什么是ECharts

ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。

官网 http://echarts.baidu.com/

2、开始简单配置关系图

1、首先配置series的type为graph。

2、layout为force，layout可以选择none、circular和force

　　'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。

　　'circular' 采用环形布局。

　　'force' 采用力引导布局。

　　来自官方文档

2、设置鼠标移动到人物处显示人物简介tooltip

tooltip: {
    formatter: function (x) {
        return x.data.des;
    }
}

3、设置data

{
    name: '侯亮平',
    des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
    symbolSize: 100,
    itemStyle: {
        normal: {
            color: 'red'
        }
    }
}

4、设置关系

{
    source: '高育良',
    target: '侯亮平',
    name: '师生',
    des: '侯亮平是高育良的得意门生'
}

3、完整代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ECharts 实现人民的名义关系图谱</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="echarts.min.js"></script>
    <style type="text/css">
        html, body, #main { height: 100%; width: 100%; margin: 0; padding: 0 }
    </style>
</head>
<body>
    <div id="main" style=""></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            title: { text: '人民的名义关系图谱' },
            tooltip: {
                formatter: function (x) {
                    return x.data.des;
                }
            },
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 80,
                    roam: true,
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [4, 10],
                    edgeLabel: {
                        normal: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    force: {
                        repulsion: 2500,
                        edgeLength: [10, 50]
                    },
                    draggable: true,
                    itemStyle: {
                        normal: {
                            color: '#4b565b'
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#4b565b'

                        }
                    },
                    edgeLabel: {
                        normal: {
                            show: true,
                            formatter: function (x) {
                                return x.data.name;
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                            }
                        }
                    },
                    data: [
                        {
                            name: '侯亮平',
                            des: '最高检反贪局侦查处处长，汉东省人民检察院副检察长兼反贪局局长。<br/>经过与腐败违法分子的斗争，最终将一批腐败分子送上了审判台，<br/>正义战胜邪恶，自己也迎来了成长。',
                            symbolSize: 100,
                            itemStyle: {
                                normal: {
                                    color: '