使用echarts实现简单的关系图谱

最新推荐文章于 2024-03-31 12:00:09 发布
从现在开始好了
最新推荐文章于 2024-03-31 12:00:09 发布
阅读量1.4k
点赞数 1
文章标签： echarts javascript 前端
本文链接：https://blog.csdn.net/hhhhhha_/article/details/127865452
版权
使用echarts实现简单的关系图谱

如图：

在这里插入图片描述
代码：

<!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>
    <script type="text/javascript" src="./js/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <!-- 为 ECharts 准备一个 Dom 盒子 -->
    <div class="tree-container">
        <div id="main" style="width: 100%;height:900px;border:1px solid #ccc;"></div>
    </div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));

        // 节点
        var data = [
            {
                id: 0,
                category: 0,
                name: "张三",
                sex: 0,
                openChild: 0,
                main: 1,
                draggable: false
            }, {
                id: 1,
                category: 0,
                name: "李四",
                sex: 1,
                openChild: 0
            }, {
                id: 2,
                category: 0,
                name: "赵二",
                sex: 1,
                openChild: 0
            }, {
                id: 3,
                category: 0,
                name: "李六",
                sex: 1,
                openChild: 0
            }, {
                id: 4,
                category: 0,
                name: "吴七",
                sex: 0,
                openChild: 0
            }, {
                id: 5,
                category: 0,
                name: "孙一",
                sex: 0,
                openChild: 0
            }, {
                id: 6,
                category: 0,
                name: "江五",
                sex: 1,
                openChild: 0
            }, {
                id: 7,
                category: 0,
                name: "陈八",
                sex: 0,
                openChild: 1
            }
        ];
        // 关系
        var links = [{
            source: 0,
            target: 1,
            relation: {
                name: "朋友", //关系名称
                id: 1,
            },
        }, {
            source: 0,
            target: 2,
            relation: {
                name: "朋友",
                id: 2,
            },
        }, {
            source: 0,
            target: 3,
            relation: {
                name: "朋友",
                id: 3,
            },
        }, {
            source: 0,
            target: 4,
            relation: {
                name: "朋友", 
                id: 4,
            },
        }, {
            source: 0,
            target: 5,
            relation: {
                name: "朋友",
                id: 5,
            },
        }, {
            source: 0,
            target: 6,
            relation: {
                name: "朋友",
                id: 6,
            },
        }, {
            source: 0,
            target: 7,
            relation: {
                name: "朋友",
                id: 7,
            },
        }, {
            source: 4,
            target: 5,
            relation: {
                name: "朋友",
                id: 8,
            },
        }];

        // 给节点替换图片  image:// 打头
        for (var i = 0; i < data.length; i++) {
            if (data[i].sex == 0) {
                data[i].symbol = 'image://images/women.webp';
            } else if (data[i].sex == 1) {
                data[i].symbol = 'image://images/man.webp';
            }
        }

        var option = {
            tooltip: {//弹窗
                formatter: formatterHover,//修改鼠标悬停显示的内容
            },
            toolbox: {
                show: true,
                top: 20,
                left: 20,
                feature: {
                    restore: {
                        title: '刷新'//刷新echarts图标
                    },
                    saveAsImage: {
                        title: '下载图片',//鼠标悬停在下载图标上时，显示的文字
                        name: 'network-topology'//下载图片的文件名为network-topology.png
                    }
                }
            },
            color: ['#09022C',
                '#040193',
                '#073CFE',
                '#0065C2'],
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [{//图片配置
                roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                draggable: true,//节点是否可拖拽，只在使用力引导布局的时候有用。
                type: 'graph', //关系图
                layout: 'force', //图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
                hoverAnimation: true,//是否开启鼠标悬停节点的显示动画
                symbolSize: [40, 40],//图形大小
                label: { //图形上的文本标签(图片名称)
                    normal: {
                        show: true,//是否显示标签。
                        position: 'bottom',//标签的位置。['50%', '50%'] [x,y]   'inside'
                        textStyle: { //标签的字体样式
                            color: '#2D2F3B', //字体颜色
                            fontStyle: 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                            fontWeight: 'normal',//'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                            fontFamily: 'sans-serif', //文字的字体系列
                            fontSize: 12, //字体大小
                        }
                    },
                    emphasis: {//高亮状态
                    }
                },
                edgeLabel: { //边的设置
                    show: true,
                    position: "middle",
                    fontSize: 12,
                    // color: '#a4e0df',//线上的字体颜色
                    formatter: (params) => {
                        return params.data.relation.name;
                    },
                },
                edgeSymbol: ['none', 'none'],//边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
                force: {
                    repulsion: 450,//相距距离
                    edgeLength: [150, 200],
                    layoutAnimation: true
                },
                edgeSymbolSize: 10,//边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
                lineStyle: { //节点连线样式。
                    normal: {
                        color: '#31354B',
                        width: '1',
                        type: 'solid', //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                        curveness: 0, //线条的曲线程度，从0到1
                        opacity: 1
                        // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
                    },
                    emphasis: {//高亮状态

                    }
                },
                data: data,
                links: links //edges是其别名代表节点间的关系数据。
            }]
        };

        function formatterHover(params) {
            if (params.dataType === "node") {
                if (params.data.main == 1) {
                    return `主要人物：${params.data.name}`
                } else {
                    return `${params.data.name}`

                }
            } else {
                return `${params.data.relation.name}`
            }
        }

        myChart.setOption(option);

		// 添加点击事件
		// myChart.on('click', function(params) {
            // 如果点击的是节点
            // if (params.dataType === "node") {
            	// todo...
            // }
        // });

    </script>
</body>
</html>