echarts关系图demo

最新推荐文章于 2024-07-24 15:51:43 发布

爱学习的小兰同学

最新推荐文章于 2024-07-24 15:51:43 发布

阅读量1.7k

点赞数 1

分类专栏： # echarts 文章标签： javascript Echarts 关系图

本文链接：https://blog.csdn.net/pilgrim_121/article/details/123765660

版权

echarts 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实现效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="main" style="width: 1020px;height: 600px;">
    </div>
    <!-- 引入 echarts.js:这里在引用前需要修改echarts.js，使两点之间设置多条线条不重叠 -->
    <script src=" ./echarts.js "></script>
    <script type=" text/javascript ">
        var myChart = echarts.init(document.getElementById('main'));
        var categories = [{
            name: " 贾家 "
        }, {
            name: " 林家 "
        }, {
            name: " 薛家 "
        }];
        option = {
            tooltip: {
                formatter: function(x) {
                    return x.data.des;
                }
            },
            legend: [{
                // selectedMode: 'single',
                //设置可以根据类别显示or隐藏节点
                data: categories.map(function(a) {
                    return a.name;
                })
            }],
            color: ['#9A60B4', '#ee6666', '#91cc75', '#FAC858'],
            series: [{
                type: 'graph', // 类型:关系图
                layout: 'force', //图的布局，类型为力导图
                symbolSize: 40, // 调整节点的大小
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [2, 10],
                // itemStyle: {
                //     color: " rgba(101, 90, 90, 1) "
                // },
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                force: {
                    repulsion: 2500,
                    edgeLength: [10, 100]
                },
                draggable: true,
                focusNodeAdjacency: true, //聚焦邻接节点
                legendHoverLink: true, //启用图例 hover 时的联动高亮
                lineStyle: {
                    normal: {
                        width: 2,
                        // color: " aaa ",
                        color: '#4b565b',
                        opacity: 0.5,
                        //curveness: 0.1,
                    }
                },
                emphasis: {

                    itemStyle: {
                        shadowColor: " rgba(0, 0, 0, 0.4) ",
                        shadowBlur: 5,
                    },
                    lineStyle: {
                        width: 3,
                    }
                },

                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function(x) {
                            return x.data.name;
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {}
                    }
                },

                // 数据
                data: [{
                    name: '贾宝玉',
                    des: '爱憎分明',
                    symbolSize: 70, //节点大小
                    category: 0, //设置节点所属类别
                }, {
                    name: '林黛玉',
                    des: '敏感细腻',
                    symbolSize: 70,
                    category: 1,
                }, {
                    name: '薛宝钗',
                    des: '圆滑世故',
                    symbolSize: 70,
                    category: 2,
                }, {
                    name: '晴雯',
                    des: '美丽聪慧',
                    symbolSize: 50,
                    category: 0,
                }],
                links: [{
                    source: '贾宝玉', //源节点
                    target: '林黛玉', //目标节点
                    name: '表兄妹', //关系
                    des: '',
                    label: {
                        show: true
                    },
                    lineStyle: {
                        curveness: 0//线条弧度
                    }
                }, {
                    source: '贾宝玉',
                    target: '薛宝钗',
                    name: '表姐弟',
                    des: '',
                    label: {
                        show: true
                    },
                    lineStyle: {
                        curveness: -0.4
                    }
                }, {
                    source: '贾宝玉',
                    target: '薛宝钗',
                    name: '夫妻',
                    des: '',
                    label: {
                        show: true
                    },
                    lineStyle: {
                        curveness: 0.4
                    }
                }, {
                    source: '贾宝玉',
                    target: '晴雯',
                    name: '主仆',
                    des: '',
                    label: {
                        show: true
                    },
                    lineStyle: {
                        curveness: 0.3
                    }
                }],
                categories: categories, //给类别赋值
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>