知识图谱可视化——echarts实现单击加入节点

已于 2022-03-19 21:25:24 修改
阅读量4.5k 收藏 73
点赞数 12
分类专栏： 知识图谱 文章标签： 可视化 数据可视化 知识图谱
于 2021-05-01 00:35:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46521785/article/details/116311169
版权

讲解视频

https://www.bilibili.com/video/BV1gZ4y1F7Vx

效果图

在这里插入图片描述
单击话题分析后
在这里插入图片描述

源代码

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <div id="OdfMes" style="width: 1800px;height: 800px;float: right"></div>
</body>
<script>
    var datas = [{
        name: '校园大数据',
        symbolSize: 120,
        // draggable: true,//加上这句话后不可点击
        category: 0,
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 6,
                shadowBlur: 20,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        }
    }, {
        name: '舆情大数据',
        symbolSize: 100,
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },
        category: 1,

    }, {
        name: '用户分析',
        symbolSize: 80,
        category: 1,
        itemStyle: {
            normal: {
                borderColor: '#04f2a7',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },

    }, {
        name: '话题分析',
        symbolSize: 80,
        category: 1,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },

    }, {
        name: '评论分析',
        symbolSize: 80,
        category: 1,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },

    }, {
        name: '图书馆分析',
        symbolSize: 100,
        category: 2,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43',
            }
        },

    }, {
        name: '借阅分析',
        symbolSize: 80,
        category: 2,
        itemStyle: {
            normal: {
                borderColor: '#b457ff',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#b457ff',
                color: '#001c43'
            }
        },

    }, {
        name: '借阅排行',
        symbolSize: 80,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43'

            }
        },
        category: 2,

    }, {
        name: '图书收录',
        symbolSize: 80,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43'
            }
        },
        category: 2,

    }, {
        name: '图书分析',
        symbolSize: 80,
        category: 2,
        itemStyle: {
            normal: {
                borderColor: '#82dffe',
                borderWidth: 4,
                shadowBlur: 10,
                shadowColor: '#04f2a7',
                color: '#001c43'
            }
        },
    }];
    var linkmes = [{
            source: '校园大数据',
            target: '舆情大数据',
            value: 'DNA'
        }, {
            source: '校园大数据',
            target: '图书馆分析',
            value: 'DNA'
        }, {
            source: '舆情大数据',
            target: '用户分析',
            value: 'DNA'
        },
        //  {
        //     source: '用户分析',
        //     target: '舆情大数据',
        //     value: '哇哦！'
        // }, 
        {
            source: '舆情大数据',
            target: '话题分析',
            value: 'DNA'
        }, {
            source: '舆情大数据',
            target: '评论分析',
            value: 'DNA'
        }, {
            source: '校园大数据',
            target: '图书馆分析',
            value: 'DNA'
        }, {
            source: '图书馆分析',
            target: '图书分析',
            value: 'DNA'
        }, {
            source: '图书馆分析',
            target: '借阅分析',
            value: 'DNA'
        }, {
            source: '图书馆分析',
            target: '借阅排行',
            value: 'DNA',
        }, {
            source: '图书馆分析',
            target: '图书收录',
            value: 'DNA'
        }
    ]; //连接的信息

    $(function() {
        var myChart = echarts.init(document.getElementById('OdfMes'));
        option = {
            backgroundColor: '#1a4377',

            tooltip: {},
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            color: ['#83e0ff', '#45f5ce', '#b158ff'],
            series: [{
                type: 'graph',
                layout: 'force',
                force: {
                    repulsion: 1000,
                    edgeLength: 50
                },
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                data: datas,
                links: linkmes,
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 5,
                        curveness: 0
                    }
                },
                categories: [{
                    name: '0'
                }, {
                    name: '1'
                }, {
                    name: '2'
                }]
            }]
        }
        myChart.setOption(option);
        myChart.on('click', function(params) {
            if (params.name != null) {
                //var mes=params.name.replace(/\d+/g,"")
                console.log(params);
                if (params.name == "话题分析") {
                    //更新节点
                    datas.push({
                        name: '图书分析a',
                        symbolSize: 80,
                        category: 2,
                        itemStyle: {
                            normal: {
                                borderColor: '#82dffe',
                                borderWidth: 4,
                                shadowBlur: 10,
                                shadowColor: '#04f2a7',
                                color: '#001c43'
                            }
                        }
                    });
                    //更新边的关系
                    linkmes.push({
                        source: '图书分析a',
                        target: '话题分析'
                    });
                    //重新画图
                    myChart.setOption({
                        series: [{
                            data: datas,
                            links: linkmes
                        }]
                    });

                }
            }
        })
    })
</script>

</html>
笼中小夜莺
关注
  • 12
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
echarts树图实现点击收缩子节点
05-02
实现的echarts中树图点击节点收缩的js，在使用该js的时候需替换原来的echarts.js或者在原echarts.js中添加一句代码，压缩包中有引用介绍
vue利用echarts简单实现具有中心节点的知识图谱代码
08-02
vue利用echarts简单实现具有中心节点的知识图谱，其中边缘节点可拖动，其大小可以根据传入的值而变化
d3.js实现知识图谱可视化
11-14
js实现知识图谱可视化，可移植性强，效果良好，我是用在了Django框架下，对于知识图谱查询结果的输出，也可以用在spring框架下。
vue知识图谱可视化_知识图谱(节点关系图)-echarts实现方案
weixin_39657521的博客
12-20 4009
前言最近项目需求,要做一个知识图谱,参照为思知.然后就去看了一下效果及他的实现方案,也找了其他的方案,对比之后发现echarts的关系图实现起来比较简单,于是乎就基于echarts的graph关系图实现.(ps:思知实现方式是d3).效果图正文接下来开始讲解代码逻辑:目录结构KnowledgeGraph.vue文件为外层大页面keywords.vue 文件为类目滚动页面charts.vue 文件为...
知识图谱可视化项目.zip
最新发布
11-14
知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码 知识图谱项目 可用于毕业设计、课程设计、项目实践，提供设计资料+源码
ECharts关系图，节点可拖拽，添加节点和边的点击事件
Mu_Yue_Yue的博客
05-20 2万+
最近在做一个neo4j前端可视化的任务，对比了ECharts.js，Cytoscape.js和D3.js几个前端可视化工具，最终选择了ECharts.js，百度的一款开源工具，简单好用，比较容易上手。后台采用Python的Django框架，主要用于接收前端的请求，从neo4j数据库获取数据，并将数据传给前端服务器展示。这里只展示ECharts的用法以及自己的一些总结，为以后打下一个...
知识图谱可视化之Echarts-静态图谱与Django构建动态图谱项目源码
03-15
本项目主要介绍使用Echarts进行图谱可视化的方法： 1） 知识图谱的静态展示（静态html文件） 2）使用Python的django框架进行开发，并将后台业务逻辑生成的数据传送到前端js中进行展示，实现动态图谱构建，满足工程实际需要。 动态与静态图谱均整合至项目源码中，使用不同路由即可访问。 注：结合博客理解本项目更佳，运行项目前请看readme文件！
echarts知识图谱关系图节点点击事件
qq_41837182的博客
02-10 1779
echarts知识图谱关系图节点点击事件
echarts实现知识图谱
qq_32054169的博客
06-29 1811
智识平台实现知识图谱可视化采取的开源库是echarts。相对其他工具来说，echarts是百度开源工具，API封装完善，简单好用，易上手。这也是我们为什么选择echarts作工具的原因。 实现步骤： 获取echarts，引入到项目中 npm install echarts --save import * as echarts from 'echarts'; 2.初始化 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。 <div id="main" style="
利用echarts做知识图谱的可视化
lijiachu的博客
09-25 1万+
一、简介 在使用neo4j对数据进行图式存储后，可以通过neo4j的端口，在浏览器上对数据进行查询更新等操作。但是要想将这些数据在自己的网站上进行显示就需要用到前端技术了。在这里我们用echarts对数据进行可视化展示。echarts是基于javascript的图表库。可以用来绘制各种各样的图表。仿制neo4j进行数据展示，可以采用力导向图实现。 二、工具 HBuilder ...
echarts关系图节点点击事件
蜗牛~~
10-18 3240
效果：节点和边都可以点击 只把核心的代码贴出来了。需要的参数，可以在打印的param里面自行获取。 this.myChart = echarts.init(document.getElementById('main')); this.myChart.on('click', function (param) { if (param.dataType == 'node') { console.log('点击了节点',param) } els.
基于Java开发的专利知识图谱可视化系统源码.zip
08-21
【资源说明】 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能。 欢迎下载，欢迎交流，互相学习进步！ 基于Java开发的专利知识图谱可视化系统源码.zip 基于Java开发的专利知识图谱可视化系统源码.zip 基于Java开发的专利知识图谱可视化系统源码.zip
知识图谱可视化——Neo4jwindows.docx
07-14
知识图谱可视化——Neo4jwindows.docx
在Vue中使用echarts的方法
08-28
主要介绍了Vue中使用echarts的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下
echarts tree 点击节点收缩(关闭子节点)功能实现
08-18
实现echarts中的树形tree图的节点收缩功能,子节点最多支持扩展9个,通过value作为层级的标识.能够完美实现子节点的缩放功能.
Echarts 绘制关系图（知识图谱可视化）
热门推荐
学习笔记
04-05 7万+
1.前言 正在做知识图谱 ，以前可视化用的是D3，因为D3不是太会，而且D3学习成本比较高，所以改用Echarts，Echarts做出来的关系图还是挺好的，记录下来，给以后实验室的学弟学妹们使用。 2.关系图实例 样例代码如下： <!DOCTYPE html> <html> <head> <title>ECharts 关系图&l...
Echarts实现知识图谱可视化-静态图谱
qq_43442392的博客
02-19 6716
1.前言 毕业季快到，轮到我做毕设，需要实现图谱可视化，找到了浏览量最多的博客，copy到自己项目中发现依然有一些问题，又看了很多博客后得意解决，因此决定记录下完整代码，以便其他人使用。 例子已做了简化。 2.Echarts Echarts工具库是使用js代码进行各种工具图的构建，图形样式十分丰富，目前大部分网站图形均由Echarts构建，想要了解更多信息请查看Echarts官网 3.关系图实例 代码如下： <%@ page contentType="text/html;charset=UTF-8"
Echarts力导向图+Django框架实现知识图谱
Jasmine的学习小站
07-14 3568
一、 开发坏境 技术点 python基础 Django框架基本原理与Django项目基本实现 关系型数据库基本原理 前端3大基本知识（html、css、js）+jquery Django上AJAX传输操作 前端框架Echarts基本使用 环境 Windows 10 Python语言 Pycharm编译器 db.sqllite数据库 二、 项目创建 先使用django-admin创建项目knowledge； 在项目中创建python manage.py graph创建app用来实现前端对知识图谱的操作，
echarts实现知识图谱，生产项目
清澈明朗 积极向上
02-28 1906
通过使用echarts的关系图实现知识图谱展示和管理。
分别阐述知识图谱节点的修改和知识图谱可视化
05-22
1. 知识图谱节点的修改 知识图谱节点的修改是指对已经存在的节点信息进行更新、删除或者新增的操作。具体包括以下几个方面： - 更新节点属性：如果某个节点的属性发生了变化，比如名称、类型、描述等，需要对该节点进行更新操作。 - 删除节点：如果某个节点不再具有实际意义或者与其他节点之间的关联关系已经不存在，需要对该节点进行删除操作。 - 新增节点：如果需要向知识图谱中添加新的节点信息，需要对该节点进行新增操作。 在进行知识图谱节点的修改时，需要对节点的唯一标识进行确认，以确保对正确的节点进行操作。同时，需要考虑对节点的修改所带来的影响，比如是否需要对相关节点进行更新，以保证知识图谱的完整性和准确性。 2. 知识图谱可视化 知识图谱可视化是指将知识图谱中的节点和关系以图形化的方式展示出来，以便用户更加直观地理解和使用知识图谱。通常采用的可视化方法主要有以下几种： - 树形结构可视化：将知识图谱中的节点按照树形结构排列，并将节点之间的关系用线段表示，使用户能够清晰地了解知识图谱的层级结构和节点之间的关系。 - 网状结构可视化：将知识图谱中的节点用圆形或者方形图标表示，并将节点之间的关系用线段表示，使用户能够清晰地了解知识图谱的整体结构和节点之间的关系。 - 地图结构可视化：将知识图谱中的节点按照地理位置排列，并将节点之间的关系用线段表示，使用户能够清晰地了解知识图谱中的地理信息和节点之间的关系。 在进行知识图谱可视化时，需要考虑用户使用场景和需求，选择合适的可视化方法，并通过交互方式提供更加丰富的用户体验。同时，需要注意保护知识图谱中的敏感信息，避免泄露。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笼中小夜莺

嘿嘿嘿，请用金钱尽情地蹂躏我吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值