查看 echarts 关系图的每个 node 的 xy 坐标

最新推荐文章于 2025-09-22 00:00:00 发布
原创 最新推荐文章于 2025-09-22 00:00:00 发布 · 1w 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了一段使用ECharts绘制复杂关系图的代码实例，包括节点与边的定义、样式设置及如何通过控制台查看节点坐标等关键信息。

一段 echarts 关系图代码

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="application/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="application/javascript" src="js/echarts.js"></script>
</head>
<body>
    <div id="myChartDiv" style="width: 500px; height: 400px"></div>
</body>

<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('myChartDiv'));

    let option = {
        series: [
            {
                type: 'graph',
                layout: 'none',
                symbolSize: 50,
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                data: [{
                    name: '节点1',
                    x: 300,
                    y: 300
                }, {
                    name: '节点2',
                    x: 800,
                    y: 300
                }, {
                    name: '节点3',
                    x: 550,
                    y: 100
                }, {
                    name: '节点4',
                    x: 550,
                    y: 500
                }],
                // links: [],
                links: [{
                    source: 0,
                    target: 1,
                    symbolSize: [5, 20],
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 5,
                            curveness: 0.2
                        }
                    }
                }, {
                    source: '节点2',
                    target: '节点1',
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    lineStyle: {
                        normal: { curveness: 0.2 }
                    }
                }, {
                    source: '节点1',
                    target: '节点3'
                }, {
                    source: '节点2',
                    target: '节点3'
                }, {
                    source: '节点2',
                    target: '节点4'
                }, {
                    source: '节点1',
                    target: '节点4'
                }],
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0
                    }
                }
            }
        ]
    };

    myChart.setOption(option);

    console.log(myChart);

</script>
</html>

查看 echarts 关系图的每个 node 的 xy 坐标

开 F12，上段代码中的console.log(myChart);会在控制台打印出 myChart 变量的内容。每个 node 的 xy 坐标在 myChart 变量的 _chartsMap/_ec_ series 0 0_series.graph/_symbolDraw/_data/_itemLayouts 处，或者 _chartsViews[0]/_symbolDraw/_data/_itemLayouts 处。

echarts关系图自定义节点坐标相互影响的问题
dbeidouxingf的博客
03-22 2182
解决echarts关系图节点间会互相影响，通过设置4个basepoint固定坐标轴范围
echarts关系图配置，及超出范围处理 + a、b两个节点互相指向时线上的字重叠问题
Shimeng_1989的博客
05-27 7398
情景：由于人物关系复杂，可以有几个 ——几十个（上百个），所以固定范围内（如：500高度）可能放不下，或者太空。所以可以根据node节点（也可根据其他判断条件）来动态修改 div / canvas高度。如果还是超出（eg：节点或者关系多），可添加roam:true的属性实现可平移拖拽 / 缩放。（在下一节讲述） 效果如图： 数据： // 数据 let data = { nodes = [ // {symbol: 'image://http://127.0.0.1:8080
ECharts关系图：社交网络与知识图谱可视化
加入“Super Entity”，与全能开发团队共探AI智能体与数字人项目，开启前沿技术之旅。
09-22 2057
关系图（Graph）是一种用于展示实体之间关系的可视化图表类型，能够清晰地表达节点之间的连接和网络结构。它在社交网络分析、知识图谱展示、组织架构图、流程图等领域有广泛应用。本文将深入探讨如何使用ECharts创建专业的关系图，从基础的节点连接展示到复杂的社交网络分析。通过丰富的实例和最佳实践，帮助开发者掌握ECharts关系图的各种配置选项和优化技巧，提升网络数据可视化效果。关系图（也称为网络图或图谱）是一种展示实体（节点）及其相互关系（边）的可视化方式。
基于echarts3.84，获取tree图中每个节点的位置，21579行，getMyPosition方法
01-17
如何在tree图中获取每个节点相对于canvas的位置，文件里面可以直接参考21579行，getMyPosition方法，里面的返回值中有你需要的，直接调用echart实例的getMyPosition方法即可。如myChart.getMyPosition({finder:{seriesIndex:1}});注意传参
echarts动态关系图示例
11-02
echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。echarts动态加载关系图示例，三层结构，中心关系子层，子层再次关系子层。
echarts 关系图 graph 节点图 动态设置x/y坐标
愿你走过半生，归来任是少年。
11-28 1万+
data: [ { name: 'Node 1', x: 300, y: 300 }, { name: 'Node 2', x: 800, y: 300 }, { name: 'Node 3', x: 550, y: 100 }, { name: 'Node 4', x: 550, y: 500 } ], // links: [], links: [ { source.
Echarts关系图(Graph)能否获取到力矢量布局(force)后点(node)的[x, y]坐标点
weixin_43127990的博客
02-16 2163
修改lib/chart/graph/GraphView的render方法，拿到了力矢量布局的x,y坐标。 通过Graphinstance.getOption()可以获取到x,y坐标。 import * as GraphViewInstance from 'echarts/lib/chart/graph/GraphView'; import graphic from "echarts/lib/util/graphic"; import adjustEdge from 'echarts/lib/chart/gr
vue项目中实际构建echarts拓扑关系图业务
SHALLNY
11-15 1万+
由于现在echarts的利用率增强，需要用到拓扑图的设计，如果单纯针对echarts文档来看，虽然可以利用API详细了解到功能点，但具体的实际运用与开发场景经验案例还是略有欠缺，下面将针对echarts关系拓扑图进行实例讲解。关系拓扑图，顾名思义，是有具体的关系存在的点，具有向量指向特点。那么就要求数据具备和的属性。思路是这样的，首先描绘物体（关系点），再者是描绘连接关系点的连线。 简单效果图如上图，共4层类型，同一层为同一个类型，分别是：运维人员、数据库、应用、用户，连接线为起始到终点的指向关系 2.测
echarts例程中的关系图使用的json数据中，节点有x、y属性，是否意味着我需要指定每个节点的坐标？有没有办法自动进行位置排布
06-18
首先，用户的问题是："我想了解ECharts关系图中是否需要手动指定节点坐标，以及是否有自动排布功能请问echarts关系图自动布局节点坐标xy属性"。这涉及到ECharts关系图的布局设置。从系统指令中，我需要：-使用中文...
Echats关系图les-miserables的图表详细解析（和弦图）（一）
SHALLNY
11-28 8236
当前遇到的图表为关系图https://www.echartsjs.com/examples/zh/editor.html?c=graph-circular-layout，它的数据结构连接为：https://www.echartsjs.comdata/asset/data/les-miserables.gexf 在浏览器内打开后即可下载当前gexf文件。 图表内是对gexf格式文件进行了解析...
echart_关系图
01-24
echart_关系图，
圆环百分比 echart数据图表实现圆环百分比
lllll520520520520520的博客
11-21 5447
现在要实现上图中的功能，圆环的四个颜色（也可以是更多颜色，可以自己改）根据四块所占比不同动态变化，并且文字也会跟着它对应的块变化位置。 只需要两步： 1.引入echarts.min.js 需要下载这个js，我刚刚上传了。但是csdn上资源都需要c币，我也没办法，只好选择最低的1c币。下载地址：https://download.youkuaiyun.com/download/lllll52052052...
echarts关系图批量导出想要的坐标节点
dbeidouxingf的博客
03-22 812
给节点添加graphic类，注意要在基础的setOption上重新setOption。在拖拽事件onPointDragging中。找到更新的数据，批量导出新数据
echarts 关系图graph
热门推荐
weixin_43294560的博客
11-06 1万+
1、配置数据类型 data:[ { name:'节点名称', value:'节点值' x:节点坐标, 在不指定的时候需要指明layout属性选择布局方式。 y:节点坐标, symbolSize: 80, draggable: true, 节点是否可拖拽，只在使用力引导布局的时候有用。 itemStyle: {} } ] 2、配置series series:[{ type: 'graph',
echarts graph（关系图），force（力引导布局），circular（环形布局）
桂秋拾貳
03-21 2862
echarts graph类型 关系图，文章内我展示了数据结构，option的内容，以及成品展示，希望可以帮助到大家学习或工作当中用到
echarts Graph+lines 拓扑图（直角坐标系版）
qq_40295815的博客
03-04 3479
const targetCoord = [1000, 140] const curveness = 0.2 const linesData = [] const categories = [{ name: '流入中', itemStyle: { normal: { color: new echarts.graphic.LinearGradi...
echarts Graph+lines 拓扑图（极坐标系）
qq_40295815的博客
03-04 3617
// 大体思路: // 1, 节点 // 2, source 和 target // 3, 错误的数据项用graph的links模拟 // 4, 正确的数据项用 lines 模拟(主要是为了动画) // 5, 难题是节点多了坐标怎么计算 var nodes = [{ name: 'java', value: [0, 0], symbol: '...
JQuery实现Echarts散点图的点击获取坐标事件
qq_43430964的博客
07-05 537
https://www.cnblogs.com/formybestlife/p/8268394.html
解决 echarts 关系图内容太多坐标失效问题的方法
最新发布
11-27
当 Echarts 关系图内容太多导致坐标失效时，可以尝试以下几种方法来解决： ### 数据采样 对原始数据进行采样，减少显示的数据量。例如，只显示关系图中最重要的节点和边。可以根据节点的重要性指标（如度中心性、介数中心性等）进行筛选。 ```javascript // 示例：假设 data 是原始节点数据，links 是原始边数据 // 筛选出度大于某个阈值的节点 const degreeThreshold = 5; const importantNodes = data.filter(node => { const degree = links.filter(link => link.source === node.name || link.target === node.name).length; return degree > degreeThreshold; }); // 筛选出与重要节点相关的边 const importantLinks = links.filter(link => { const sourceIncluded = importantNodes.some(node => node.name === link.source); const targetIncluded = importantNodes.some(node => node.name === link.target); return sourceIncluded && targetIncluded; }); option = { series: [ { type: 'graph', data: importantNodes, links: importantLinks } ] }; ``` ### 动态加载 采用动态加载的方式，当用户进行缩放、平移等操作时，再加载更多的数据。可以通过监听 Echarts 的事件来实现。 ```javascript myChart.on('zoom', function () { // 根据当前的缩放级别和视野范围，动态加载数据 // 这里只是示例，实际需要根据具体情况实现数据加载逻辑 const currentZoom = this.getOption().series[0].zoom; if (currentZoom > 1.5) { // 加载更多数据 // 更新 option 并重新渲染图表 myChart.setOption(newOption); } }); ``` ### 布局优化 使用合适的布局算法，让节点和边分布更合理。Echarts 提供了多种布局方式，如力引导布局、环形布局等。可以根据数据特点选择合适的布局。 ```javascript option = { series: [ { type: 'graph', layout: 'force', // 使用力引导布局 force: { repulsion: 100, // 节点之间的斥力 edgeLength: 50 // 边的长度 } } ] }; ``` ### 分块显示 将关系图分成多个小块，每个小块单独显示。用户可以通过切换小块来查看不同部分的关系图。可以通过数据的分类或层次结构进行分块。 ```javascript // 假设数据可以根据某个属性进行分类 const category1Nodes = data.filter(node => node.category === 1); const category1Links = links.filter(link => { const sourceIncluded = category1Nodes.some(node => node.name === link.source); const targetIncluded = category1Nodes.some(node => node.name === link.target); return sourceIncluded && targetIncluded; }); // 为每个小块创建一个 Echarts 图表 const chart1 = echarts.init(document.getElementById('chart1')); const option1 = { series: [ { type: 'graph', data: category1Nodes, links: category1Links } ] }; chart1.setOption(option1); ```
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值