人物关系图谱:ECharts 实现

最新推荐文章于 2024-03-12 15:22:05 发布

VIP文章秦岭熊猫

最新推荐文章于 2024-03-12 15:22:05 发布

阅读量8k

点赞数 7

分类专栏：前端

本文链接：https://blog.csdn.net/tianshan2010/article/details/103890010

版权

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.dat

最低0.47元/天解锁文章

秦岭熊猫

关注

7
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
人物关系图谱:ECharts 实现

1、什么是EChartsECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。官网http://echarts.baidu.com/2、开始简单配置关系图1、首先配置series的type为graph。2、layout为force，layout可以选择none、circular和force...
复制链接

扫一扫