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

最新推荐文章于 2025-05-19 14:34:05 发布

原创最新推荐文章于 2025-05-19 14:34:05 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

关系图专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一段 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 处。