echarts的关系图的demo

最新推荐文章于 2022-03-26 22:54:03 发布

北方的木

最新推荐文章于 2022-03-26 22:54:03 发布

阅读量1.2k

点赞数 1

分类专栏： js .NET 文章标签：前端

本文链接：https://blog.csdn.net/q1923408717/article/details/115726873

版权

.NET 同时被 2 个专栏收录

53 篇文章 4 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

效果图如下
在这里插入图片描述
demo代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="/jquery/echarts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="main" style="   width: 2000px; height: 1000px;"></div>
    </form>
</body>
</html>
<script>
    var myChart = echarts.init(document.getElementById('main'));// 初始化图表信息
    var option = {
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        series: [
            {
                type: 'graph',
                layout: 'force', // layout: 'force'力导向布局  //layout: “circular” 环形布局
                symbolSize: 80,
                roam: true,//添加缩放和移动
                edgeSymbol: ['arrow', 'arrow'],//边两端的标记类型  //circle是点，arrow箭头
                edgeSymbolSize: [0, 0],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                force: {
                    repulsion: 3500,
                    edgeLength: [100, 100]
                },
                draggable: true,// 可移动
                focusNodeAdjacency: false,//当鼠标移动到节点上，突出显示节点以及节点的边和邻接节点
                itemStyle: {
                    normal: {
                        color: '#666666'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#666666'

                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (x) {
                            return x.data.name;
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',//相对于节点标签的位置，默认在节点中间 inside outside left top right bottom
                        textStyle: {
                        }
                    }
                },
                data: [],
                links: []
            }
        ]
    };
    //设置图的参数
    myChart.setOption(option);
    //以下为demo数据
    myChart.setOption({
        series: [{
            data: [{
                name: '节点名称1',
                des: '备注1',
                symbol: "image://images/unknown.png",//自定义节点图片
                symbolSize: 40,//节点大小
                node_id: "1",//自定义字段 数据的ID 如需要可以自己加字段
            }, {
                name: '节点名称2',
                des: '备注2',
                symbol: "image://images/unknown.png",
                symbolSize: 40,
                node_id: "2",
            }, {
                name: '节点名称3',
                des: '备注3',
                symbol: "image://images/unknown.png",
                symbolSize: 40,
                node_id: "3",
            }, {
                name: '节点名称4',
                des: '备注4',
                symbol: "image://images/unknown.png",
                symbolSize: 40,
                node_id: "3",
            }
                , {
                name: '节点名称5',
                des: '备注5',
                symbol: "image://images/unknown.png",
                symbolSize: 40,
                node_id: "3",
            }],
            links: [{
                source: '节点名称1',
                target: '节点名称2',
                name: '关系名称1',
                symbolSize: [10, 10], //[0,0]表示没有只有线没有箭头，[10,0]表示指向左边有箭头
                des: '侯亮平是高育良的得意门生'
            }, {
                source: '节点名称2',
                target: '节点名称3',
                symbolSize: [10, 0],
                name: '关系名称2'
            }, {
                source: '节点名称3',
                target: '节点名称1',
                symbolSize: [0, 10],
                name: "关系名称3"
            }, {
                source: '节点名称3',
                target: '节点名称4',
                symbolSize: [0, 10],
                name: "关系名称4"
            }
                , {
                source: '节点名称2',
                target: '节点名称4',
                symbolSize: [0, 10],
                name: "关系名称5"
            }
                , {
                source: '节点名称5',
                target: '节点名称4',
                symbolSize: [0, 10],
                name: "关系名称6"
            }]
        }]
    });
    //请求后台给myChart复制，data表节点数据，links表节点之间的关系数据
    //    myChart.setOption({
    //        series: [{
    //            data: [],//此处放data
    //            links: []//此处放links
    //        }]
    //    });

    //双击时间根据e.type判断点击的是什么
    myChart.on('dblclick', function (e) {
        // edge是关系线条 node是节点

    });
</script>