Echarts的重名问题解决（结合neo4j）

luuuuuuuuuuuuuuuu

已于 2022-07-15 00:08:04 修改

阅读量1k

点赞数

文章标签： vue echarts

于 2022-07-15 00:07:01 首次发布

本文链接：https://blog.csdn.net/qq_40636895/article/details/125795248

版权

Echarts的重名问题解决（结合neo4j）

前提：要求从neo4j的库中读取节点然后在前端绘制知识图谱，于是我找到了Echarts中的人物关系图，看了网站中的教程，发现大家都是用节点的name来充当索引，于是我也效仿了该做法，结果发现从neo4j中获取到的节点有太多重名的节点，前端无法解析这些重名节点造成前端一直报错 duplicate id or name。

解决办法：获取节点的实时ID

`nodesearch = matcher.match("node", name=search_name).first() //该步骤从neo4j中获取到名为search_name的节点`

'id': '%d'%id(nodesearch),//在将节点插入nodes数组的时候加上id这一项 id(node)可以获取节点的实时ID '%d'%可以将id转化为字符串

注意
1.我在过程中发现只有将id都转化为字符串才能正确使用在前端上
2.由于我要画的图需要以名为search_name的节点为中心，所以links数组中的source应该一直是nodesearch的id

优惠劵

luuuuuuuuuuuuuuuu

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Echarts的重名问题解决（结合neo4j）

解决echarts重名问题，本实验的数据从neo4j的库中读取
复制链接

扫一扫

vue中使用echarts制作圆环图的实例代码

10-18

主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

Java读取CSV插入Neo4j并生成Echarts关系图

08-05

Java读取CSV插入Neo4j并生成Echarts关系图

参与评论您还未登录，请先登录后发表或查看评论

Neo4J - ECharts力导向图

weixin_51146503的博客

04-02

1313

知识图谱有多种可视化形式，在此以力导向图作为可视化形式。对比了D3、neovis.js和ECharts，选择了开箱即用就很优美且定制化程度较高的ECharts。

echarts关系图name重复问题

ZKTIAN的博客

07-06

2919

1. 用echarts的showName来实现，效果如下图所示：，代码可以直接放到echarts官网测试： echarts官网：https://echarts.apache.org/examples/zh/index.html 代码如下图所示： xydata = [[2, 4], [6, 7], ...

echarts 树状图节点太多导致节点重叠，如何调整

sinat_20078327的博客

04-27

9381

由于节点太多导致节点重叠在一起后用户无法正常查看，我们可以根据节点的数量并设置每个节点间的高度动态调整E charts 画布的高度和宽度。如下代码： html部分： <template> <div :style="{height: chartHeight}"> <div ref="main" style="height: 100%"></div> </div> </template> js部分

eharts v5版本树形图数据过多展示全部重叠

会点php的前端小渣渣

09-22

375

【代码】eharts v5版本树形图数据过多展示全部重叠。

SSM+Neo4j+Echarts完整版

02-06

完整项目导入数据到Neo4j,通过jdbc查询Neo4j数据库,用SSM框架展示到前台,项目部署后可在前台批量导入数据,增量导入数据,添加节点,删除节点,修改节点,查询节点有了它再也不用趟Neo4j的坑解压密码是 neo4j

echarts 关系图节点重名问题解决方案！

最新发布

05-09

基于neo4j的汽车知识图谱，使用flask构建系统，Echarts可视化.zip基于neo4j的汽车知识图谱，使用flask构建系统，Echarts可视化.zip基于neo4j的汽车知识图谱，使用flask构建系统，Echarts可视化.zip基于neo4j的汽车...

Neo4j开源社区版安装问题解决以及官方实例运行指南

03-28

虽然Mysql可以通过表之间的联结查询来表示，可是在大数据量的情况下，开销成为了很大的问题。因此对Neo4j进行了学习。资源中包含安装的过程，以及官方例子：电影图数据库和从关系数据库中到图数据库中迁移的...

eharts树形图数据过多展示全部重叠了，子级过多，不全部展示解决方法

qq_26841153的博客

11-08

3794

eharts树形图数据过多展示全部重叠了，子级过多，不全部展示解决方法

【vue2+echarts】树状图（标签显示不全、节点文本过长换行等问题解决）

记录

07-05

2295

ECharts树节点过多时，不想要缩放，调整容器高度（宽度）：带图片效果图，也有讲一下原理echarts 树状图节点太多导致节点重叠，如何调整：vue里使用的方法。思路其实和上一个是一样的。echarts树形图节点及提示框文字过长问题。

报错Could not open a new Neo4j session: Unsupported authentication token, scheme ‘none‘ is only ......

sun_kingngfyncfh的博客

07-04

771

报错：Resolved [org.springframework.transaction.TransactionSystemException: Could not open a new Neo4j session: Unsupported authentication token, scheme 'none' is only allowed when auth is disabled.; nested exception is org.neo4j.driver.exceptions.

Grafana+Echarts+Neo4j+SpringBoot 联合搭建节点实时拓扑图

qq_31777443的博客

12-05

1085

基于Grafana+Echarts+Neo4j+SpringBoot实现的实时服务端节点实时拓扑图

echarts关系图报错Cannot set property ‘dataIndex‘ of undefined

qq_46100747的博客

07-23

3493

系图报错Cannot set property ‘dataIndex’ of undefined。 graph图里面nodes的name不能重复，重复的话会报这个样错误

vue结合neo4j使用echarts实现图谱可视化代码

06-01

下面是一个简单的示例代码，展示了如何使用Vue.js、Neo4j和ECharts来实现图谱可视化： 1. 安装依赖： ``` npm install neo4j-driver echarts --save ``` 2. 在Vue.js组件中引入neo4j-driver和echarts： ```javascript import neo4j from 'neo4j-driver'; import echarts from 'echarts'; ``` 3. 定义Neo4j连接： ```javascript const driver = neo4j.driver( 'bolt://localhost:7687', neo4j.auth.basic('neo4j', 'password') ); ``` 4. 实现查询Neo4j数据库的函数： ```javascript async function runCypherQuery(query, params) { const session = driver.session(); const result = await session.run(query, params); session.close(); return result.records; } ``` 5. 在Vue.js组件中定义ECharts实例和数据： ```javascript data() { return { chart: null, chartData: { nodes: [], links: [] } }; }, mounted() { this.chart = echarts.init(this.$refs.chart); } ``` 6. 实现查询Neo4j数据库并将结果转换为ECharts数据格式的函数： ```javascript async function queryAndTransformData() { const result = await runCypherQuery('MATCH (n)-[r]->(m) RETURN n,r,m', {}); const nodes = []; const links = []; for (const record of result) { const node1 = record.get('n'); const node2 = record.get('m'); const link = record.get('r'); const node1Index = nodes.findIndex(node => node.id === node1.identity.toString()); const node2Index = nodes.findIndex(node => node.id === node2.identity.toString()); if (node1Index === -1) { nodes.push({ id: node1.identity.toString(), name: node1.properties.name }); } if (node2Index === -1) { nodes.push({ id: node2.identity.toString(), name: node2.properties.name }); } links.push({ source: node1.identity.toString(), target: node2.identity.toString(), name: link.type }); } return { nodes, links }; } ``` 7. 在Vue.js组件中实现获取数据、更新ECharts图表的函数： ```javascript async function updateChart() { const data = await queryAndTransformData(); this.chartData = data; const option = { series: [ { type: 'graph', layout: 'force', force: { repulsion: 100, edgeLength: 50 }, data: data.nodes.map(node => ({ name: node.name, draggable: true })), links: data.links.map(link => ({ source: link.source, target: link.target, name: link.name })), label: { show: true }, lineStyle: { width: 2, curveness: 0.3, color: '#999' } } ] }; this.chart.setOption(option); } ``` 8. 在Vue.js组件中调用updateChart()函数以获取数据并更新ECharts图表： ```javascript mounted() { this.chart = echarts.init(this.$refs.chart); this.updateChart(); }, methods: { async updateChart() { // 实现updateChart函数的代码 } } ``` 希望这个示例代码能够帮助你开始使用Vue.js、Neo4j和ECharts来实现图谱可视化。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交