基于 Echarts实现简单网络拓扑

最新推荐文章于 2025-05-31 12:59:44 发布

原创最新推荐文章于 2025-05-31 12:59:44 发布 · 4.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts

炫酷 Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用ECharts实现的简单网络拓扑布局方法，通过定义节点位置和连接关系，展示了一个包含服务器和路由器的网络结构。文章详细解释了如何设置节点大小、样式以及边的类型和样式。

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

基于 Echarts实现简单网络拓扑实现

option = {
    title: {
        text: '简单网络拓扑'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    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: 100,
                y: 100
            }, {
                name: '服务器2',
                x: 220,
                y: 310
            }, {
                name: '路由器',
                x: 100,
                y: 200
            }, {
                name: '服务器4',
                x: 10,
                y: 300
            }],
            // links: [],
            links: [{
                source: '路由器',
                target: '服务器1'
            }, {
                source: '路由器',
                target: '服务器2'
            }, {
                source: '路由器',
                target: '服务器4'
            }],
            lineStyle: {
                normal: {
                    opacity: 0.9,
                    width: 2,
                    curveness: 0
                }
            }
        }
    ]
};