Echarts实现关系图

最新推荐文章于 2024-06-15 16:25:55 发布
最新推荐文章于 2024-06-15 16:25:55 发布
阅读量1w 收藏 7
点赞数
分类专栏： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nieji3057/article/details/81938006
版权 
首先贴上代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关系图案例</title>
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="js/echarts-all.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
<div  style="width:1000px;height:800px;" id="gx"></div>tooltip
</body>
</html>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('gx'));
    option = {
        title : {
            text: '人物关系：乔布斯',
            subtext: '数据来自人立方',
            x:'right',
            y:'bottom'
        },
        tooltip : {
            trigger: "axis",
            trigger: 'item',
            formatter: '{a} : {b}'
//            formatter:function (param) {
//                var data = param.data;
//                var links = option.series[0].links;
//                var nodes = option.series[0].nodes;
//                if (
//                    data.source !== undefined
//                    && data.target !== undefined
//                ) { //点击的是边
//                    var sourceNode = nodes.filter(function (n) {return n.name == data.source})[0];
//                    var targetNode = nodes.filter(function (n) {return n.name == data.target})[0];
//                    return ("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
//                } else { // 点击的是点
//                    return ("选中了" + data.name + '(' + data.value + ')');
//                }
//            }
        },
        toolbox: {
            show : true,
            feature : {
                restore : {show: true},
                magicType: {show: true, type: ['force', 'chord']},
                saveAsImage : {show: true}
            }
        },
        legend: {
            x: 'left',
            data:['人物','家人','朋友']
        },
        series : [
            {
                type:'force',
                name : "人物关系",
                ribbonType: false,
                categories : [
                    {
                        name: '人物'
                    },
                    {
                        name: '家人'
                    },
                    {
                        name:'朋友'
                    }
                ],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: '#333'
                            }
                        },
                        nodeStyle : {
                            brushType : 'both',
                            borderColor : 'rgba(255,215,0,0.4)',
                            borderWidth : 1
                        },
                        linkStyle: {
                            type: 'curve'
                        }
                    },
                    emphasis: {
                        label: {
                            show: false
                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                        },
                        nodeStyle : {
                            //r: 30
                        },
                        linkStyle : {}
                    }
                },
                useWorker: false,
                minRadius : 15,
                maxRadius : 25,
                gravity: 1.1,
                scaling: 1.1,
                roam: 'move',
                nodes:[
                    {category:0, name: '乔布斯', value : 10, label: '乔布斯\n（主要）'},
                    {category:1, name: '丽萨-乔布斯',value : 2},
                    {category:1, name: '保罗-乔布斯',value : 3},
                    {category:1, name: '克拉拉-乔布斯',value : 3},
                    {category:1, name: '劳伦-鲍威尔',value : 7},
                    {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
                    {category:2, name: '奥巴马',value : 8},
                    {category:2, name: '比尔-盖茨',value : 9},
                    {category:2, name: '乔纳森-艾夫',value : 4},
                    {category:2, name: '蒂姆-库克',value : 4},
                    {category:2, name: '龙-韦恩',value : 1},
                ],
                links : [
                    {source : '丽萨-乔布斯', target : '乔布斯', weight : 1, name: '女儿'},
                    {source : '保罗-乔布斯', target : '乔布斯', weight : 2, name: '父亲'},
                    {source : '克拉拉-乔布斯', target : '乔布斯', weight : 1, name: '母亲'},
                    {source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
                    {source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3, name: '合伙人'},
                    {source : '奥巴马', target : '乔布斯', weight : 1},
                    {source : '比尔-盖茨', target : '乔布斯', weight : 6, name: '竞争对手'},
                    {source : '乔纳森-艾夫', target : '乔布斯', weight : 1, name: '爱将'},
                    {source : '蒂姆-库克', target : '乔布斯', weight : 1},
                    {source : '龙-韦恩', target : '乔布斯', weight : 1},
                    {source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
                    {source : '奥巴马', target : '保罗-乔布斯', weight : 1},
                    {source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
                    {source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
                    {source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
                    {source : '比尔-盖茨', target : '奥巴马', weight : 6},
                    {source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
                    {source : '蒂姆-库克', target : '奥巴马', weight : 1}
                ]
            }
        ]
    };
//    var ecConfig = require('echarts/config');
    function focus(param) {
        var data = param.data;
        var links = option.series[0].links;
        var nodes = option.series[0].nodes;
        if (
            data.source !== undefined
            && data.target !== undefined
        ) { //点击的是边
            var sourceNode = nodes.filter(function (n) {return n.name == data.source})[0];
            var targetNode = nodes.filter(function (n) {return n.name == data.target})[0];
            console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' + data.weight + ')');
        } else { // 点击的是点
            console.log("选中了" + data.name + '(' + data.value + ')');
        }
    }
    myChart.on( echarts.config.EVENT.CLICK, focus);

    myChart.on( echarts.config.EVENT.FORCE_LAYOUT_END, function () {
        console.log(myChart.chart.force.getPosition());
    });

    myChart.setOption(option);
</script>


由于js包的版本不同所以造成各种各样的问题，下面提供一个下载包的链接：https://www.bootcdn.cn/echarts/

这里用的是

小驴淘米666
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts实现关系图谱
weixin_46880303的博客
06-07 337
let contacterRelationOption = { tooltip: { trigger: 'item', formatter: (params) => { if(params.dataType == "node"){ return params.data.name + '：'+ params.data.value; }
echarts人物关系图
12-04
根据Echarts生成人物关系图.
echarts动态关系图示例
11-02
echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。
echarts关系图简单配置
最新发布
qq_45432996的博客
06-15 227
【代码】echarts关系图简单配置。
Echarts 关系图
01-04
Echarts 关系图，支持关键点显示及提示框提示。。。。。。。。。。。。。。
Echarts 绘制关系图（知识图谱可视化）
热门推荐
学习笔记
04-05 7万+
1.前言 正在做知识图谱 ，以前可视化用的是D3，因为D3不是太会，而且D3学习成本比较高，所以改用Echarts，Echarts做出来的关系图还是挺好的，记录下来，给以后实验室的学弟学妹们使用。 2.关系图实例 样例代码如下： <!DOCTYPE html> <html> <head> <title>ECharts 关系图&l...
用echarts制作红楼梦关系图——保姆级教程（照做可出结果）
zgmssy的博客
03-20 1113
/ 为复选框添加事件监听});});// 搜索功能});});});// 找到搜索节点对应的所有关联节点});// 去重// 将搜索到的节点以及其关联节点添加到结果中if (!});});});});} else {alert('未找到匹配节点。');// 更新图表数据});// 更新图表数据});t=N7T8。
使用echarts实现关系图
09-02
总结来说，使用ECharts实现关系图，主要涉及ECharts库的引入、数据准备、配置项设置、图表初始化和更新等步骤。ECharts提供的强大功能和灵活性，使得创建复杂且交互性强的关系图变得简单易行。通过不断实践和调整，...
使用echarts实现立体-柱状图
07-21
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的...
echarts 关系图.docx
07-08
2. graph 组件可以用来实现关系图。 3. force 布局方式可以自动将节点和边排列在合适的位置。 4. itemStyle 属性可以指定节点的样式。 5. lineStyle 属性可以指定边的样式。 6. tooltip 可以使用 formatter 函数来...
使用echarts实现四象限散点图
09-02
**使用ECharts实现四象限散点图** 在数据分析和可视化中，散点图是一种非常常见且有效的工具，尤其在需要展示两个变量间关系时。四象限散点图则是散点图的一种特殊形式，它将坐标轴分为四个象限，每个象限具有不同...
echart_关系图
01-24
echart_关系图，
人物关系图谱:ECharts 实现
weixin_38409915的博客
03-04 4658
1、什么是ECharts ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库，相信有很多国内用户使用。 官网 https://echarts.apache.org/ 2、开始简单配置关系图 1、首先配置series的type为graph。 2、layout为force，layout可以选择none、circular和force ‘none’ 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。 ‘circular’ 采用环形布局。 ‘fo
echarts制作关系图谱
专注
09-20 379
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ECharts</title> <!-- 引入刚刚下载的 ECharts 文件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script&
echarts 关系图
qq_39750019的博客
07-08 465
echarts 关系图 1,首先是最备好div 2.数据 1）关系list 2) 节点list 3. 4. 5. 最后呈现的效果
使用echarts实现简单的关系图谱
hhhhhha_的博客
11-15 1568
【代码】使用echarts实现简单的关系图谱。
echarts关系图谱交互实现
weixin_43239880的博客
02-23 1061
echarts关系图谱交互实现 具体实现的效果如图（主要是使用了echarts的力引导图），主要是为了展现人与人还有人与物之间的关系。 如果你的项目只是用于展示的话，那么使用这个demo应该就能帮助到你。 demo地址： 但是如果你的项目不只是用户展示这部分的信息，还要求点击事件，并且要求可以用户自己手动去添加关系的话，那么你就应该需要下面这个demo了 实现效果：点击图标会显示具体该图标的信息（入人，则显示人的信息），点击关系线会显示关系线的信息，点击空白则是添加模板，默认是去添加微信的模板（这里的添
echarts关系图谱初级实现
weixin_43239880的博客
02-23 617
echarts关系图谱初级实现 具体实现的效果如图（主要是使用了echarts的力引导图），主要是为了展现人与人还有人与物之间的关系。 如果你的项目只是用于展示的话，那么使用这个demo应该就能帮助到你。 demo地址： .........
echarts——关系图
月来better
05-23 733
echarts——关系图
echarts实现人物关系力导向图
03-28
要实现人物关系力导向图，我们需要使用echarts中的关系图（graph）组件。下面是一个简单的示例： ```javascript // 初始化echarts图表 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { // 设置关系图类型 series: [{ type: 'graph', // 指定节点数据 data: [ { name: '张三', symbolSize: 80 }, { name: '李四', symbolSize: 60 }, { name: '王五', symbolSize: 50 }, { name: '赵六', symbolSize: 40 }, { name: '钱七', symbolSize: 30 }, ], // 指定节点间的关系数据 links: [ { source: '张三', target: '李四' }, { source: '张三', target: '王五' }, { source: '李四', target: '赵六' }, { source: '王五', target: '赵六' }, { source: '钱七', target: '赵六' }, ], // 指定节点的样式 itemStyle: { color: '#00BFFF' }, // 指定边的样式 lineStyle: { color: '#000' }, // 指定节点标签的样式 label: { show: true, position: 'right', formatter: '{b}' }, // 指定节点间的力引导作用 force: { repulsion: 200 } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 在上面的示例中，我们首先使用`echarts.init()`方法初始化一个echarts图表，然后指定了一个关系图（graph）类型的系列。在系列中，我们指定了节点数据和节点间的关系数据，使用了一些简单的样式设置，最后使用了`force`属性来指定节点间的力引导作用。 在实际使用中，我们可以根据需要调整节点数据、边数据、样式和力引导作用等参数，从而实现更加复杂和生动的人物关系力导向图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值