echarts网络拓扑图动态流程图

已于 2024-05-29 11:01:24 修改
阅读量1.4w 收藏 37
点赞数 4
分类专栏： # echarts 文章标签： echarts web js lines graph
于 2019-06-26 09:49:21 首次发布
本文为艾小逗原创文章，未经允许不可转载。转载请注明出处
本文链接：https://blog.csdn.net/qq_32442967/article/details/93712083
版权

echarts网络拓扑图动态流程图

适用于服务器监控，数据流向展示，实时展示服务状态
networkMap V1.0

直接下载打包代码：【无下载积分者可私聊我】
https://download.csdn.net/download/qq_32442967/11258784

样式：
在这里插入图片描述

可直接粘贴下面代码，修改js和图片路径即可实现。 需要引入js 
echarts.min.js     (必须) 
purple-passion.js     echarts主题文件(非必须但样式会改变)
networkMap.js     页面js（必须）

页面 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts</title>
	</head>
	<body>
		<div id="chart" style="height: 500px;width: 100%;">
		</div>
	</body>
</html>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/purple-passion.js"></script>
<script type="text/javascript" src="js/networkMap.js"></script>

networkMap.js

//中间数据
var nodesM = [{
    name: '服务器'
}];
//上下图表数据
var nodes = [{
    name: '采集设备01',
    state: '1'
},
    {
        name: '采集设备002',
        state: '1'
    },
    {
        name: '采集设备02',
        state: '1'
    },
    {
        name: '采集设备1',
        state: '1'
    },
    {
        name: '采集设备2',
        state: '1'
    },
    {
        name: '采集设备3',
        state: '1'
    },
    {
        name: '采集设备4',
        state: '1'
    },
    {
        name: '采集设备5',
        state: '0'
    },
    {
        name: '采集设备6',
        state: '1'
    },
    {
        name: '采集设备7',
        state: '1'
    },
    {
        name: '采集设备8',
        state: '0'
    },
    {
        name: '采集设备9',
        state: '1'
    },
    {
        name: '采集设备10',
        state: '1'
    },
    {
        name: '采集设备11',
        state: '1'
    },
    {
        name: '采集设备12',
        state: '1'
    },
    {
        name: '采集设备13',
        state: '0'
    },
    {
        name: '采集设备14',
        state: '1'
    },
    {
        name: '采集设备15',
        state: '1'
    },
    {
        name: '采集设备16',
        state: '1'
    },
    {
        name: '采集设备17',
        state: '1'
    }
];

var charts = {
    nodes: [],
    links: [],
    linesData: []
};
var x = 0;
var y = 1;
var dataMap = new Map();
var aValue = [];
for (var j = 0; j < nodes.length; j++) {
    if (j % 2 == 0) { //偶数
        aValue = [x, y];
    } else {
        aValue = [x, y - 2];
        x += 2;
    }
    var node = {
        name: nodes[j].name,
        value: aValue,
        symbolSize: 40,
        // symbol: 'image://images/' + nodes[j].img,
        symbol: 'image://images/chart/bd1.png',
        itemStyle: {
            normal: {
                color: '#12b5d0',
                fontSize: 12,
                fontWeight: 'normal'
            }
        }
    };
    dataMap.set(nodes[j].name, aValue);
    charts.nodes.push(node);
}
//中间数据显示
for (var k = 0; k < nodesM.length; k++) {
    var node = {
        name: nodesM[k].name,
        value: [x / 2 + k - 1, y - 1],
        symbolSize: 100,
        // symbol: 'image://images/' + nodesM[k].img
        symbol: 'image://images/chart/bgm.png'
    };
    dataMap.set(nodesM[k].name, [x / 2 + k - 1, y - 1]);
    charts.nodes.push(node)
}

//画线
var labelName = '';
for (var i = 0; i < nodes.length; i++) {
    //通过传输状态state 显示传输文字提示
    if (nodes[i].state === '1') {
        labelName = '数据传输中'
    } else {
        labelName = '暂停传输'
    }
    var link = {
        source: nodes[i].name,
        target: nodesM[0].name,
        label: {
            normal: {
                show: true,
                formatter: labelName,
                color: '#ed46a2',
                fontSize: 12,
                fontWeight: 'normal'
            }
        },
        lineStyle: {
            normal: {
                color: '#ed46a2',
                width: .5
            }
        }
    };
    charts.links.push(link);

    //判断传输状态1 传输动效改变线条颜色
    if (nodes[i].state === '1') {
        link.lineStyle.normal.color = '#27b0fe';
        link.label.normal.color = '#27b0fe';
        var lines = [{
            coord: dataMap.get(nodes[i].name)
        }, {
            coord: dataMap.get(nodesM[0].name)
        }];
        charts.linesData.push(lines)
    }
}

option = {
    title: {
        text: '采集拓扑图'
    },
//  backgroundColor: "#0e1735",
    xAxis: {
        show: false,
        type: 'value'
    },
    yAxis: {
        show: false,
        type: 'value'
    },
    series: [{
        type: 'graph',
        layout: 'none',
        coordinateSystem: 'cartesian2d',
        symbolSize: 50,
        label: {
            normal: {
                show: true,
                position: 'bottom',
                color: '#ffffff'
            }
        },
        lineStyle: {
            normal: {
                shadowColor: 'none',
                opacity: 1, //尾迹线条透明度
                curveness: .1 //尾迹线条曲直度
            }

        },
        edgeSymbolSize: 8,
        data: charts.nodes,
        links: charts.links,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    formatter: function (item) {
                        return item.data.name
                    }
                }
            }
        }
    }, {
        name: 'A',
        type: 'lines',
        coordinateSystem: 'cartesian2d',
        effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02,
            symbol: 'pin',
            color: '#ffaa5f',
            symbolSize: 10

        },
        lineStyle: {
            color: '#fff',
            curveness: .1 //尾迹线条曲直度
        },
        data: charts.linesData
    }]
};


/*采集拓扑图 chart*/
var dom = document.getElementById("chart");
var myChartNM = echarts.init(dom, 'purple-passion');
myChartNM.setOption(option);
window.onresize = myChartNM.resize;

//添加点击事件
myChartNM.on('click', function (params) {
    // 弹窗打印数据的名称
    if (params.dataType == "node") {
        alert("节点名称：" + params.name);
    } else if (params.dataType == "edge") {
        alert("from：" + params.data.source + "=====to:" + params.data.target);
    }
});

purple-passion.js

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    };
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    echarts.registerTheme('purple-passion', {
        "color": [
            "#27b0fe",
            "#6818cf",
            "#ffaa5f",
            "#ed46a2",
            "#2f66f6",
            "#2d8dfe"
        ],
        // "backgroundColor": "#0b122c",
        "backgroundColor": "#0e1735",
        "textStyle": {},
        "title": {
            "textStyle": {
                "color": "#ffffff"
            },
            "subtextStyle": {
                "color": "#cccccc"
            }
        },
        "line": {
            "itemStyle": {
                "normal": {
                    "borderWidth": "2"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": "3"
                }
            },
            "symbolSize": "7",
            "symbol": "circle",
            "smooth": true
        },
        "radar": {
            "itemStyle": {
                "normal": {
                    "borderWidth": "2"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": "3"
                }
            },
            "symbolSize": "7",
            "symbol": "circle",
            "smooth": true
        },
        "bar": {
            "itemStyle": {
                "normal": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                },
                "emphasis": {
                    "barBorderWidth": 0,
                    "barBorderColor": "#ccc"
                }
            }
        },
        "pie": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "scatter": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "boxplot": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "parallel": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "sankey": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "funnel": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "gauge": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                },
                "emphasis": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            }
        },
        "candlestick": {
            "itemStyle": {
                "normal": {
                    "color": "#e098c7",
                    "color0": "transparent",
                    "borderColor": "#e098c7",
                    "borderColor0": "#8fd3e8",
                    "borderWidth": "2"
                }
            }
        },
        "graph": {
            "itemStyle": {
                "normal": {
                    "borderWidth": 0,
                    "borderColor": "#ccc"
                }
            },
            "lineStyle": {
                "normal": {
                    "width": 1,
                    "color": "#aaa"
                }
            },
            "symbolSize": "7",
            "symbol": "circle",
            "smooth": true,
            "color": [
                "#27b0fe",
                "#ed46a2",
                "#2f66f6",
                "#ffaa5f",
                "#2d8dfe",
                "#6818cf"
            ],
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                }
            }
        },
        "map": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#eee",
                    "borderColor": "#444",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "rgba(224,152,199,1)",
                    "borderColor": "#444",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#000"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "rgb(255,255,255)"
                    }
                }
            }
        },
        "geo": {
            "itemStyle": {
                "normal": {
                    "areaColor": "#eee",
                    "borderColor": "#444",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "areaColor": "rgba(224,152,199,1)",
                    "borderColor": "#444",
                    "borderWidth": 1
                }
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#000"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "rgb(255,255,255)"
                    }
                }
            }
        },
        "categoryAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#cccccc"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee",
                        "#333333"
                    ]
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "valueAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#cccccc"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee",
                        "#333333"
                    ]
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "logAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#cccccc"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee",
                        "#333333"
                    ]
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "timeAxis": {
            "axisLine": {
                "show": true,
                "lineStyle": {
                    "color": "#cccccc"
                }
            },
            "axisTick": {
                "show": false,
                "lineStyle": {
                    "color": "#333"
                }
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "color": "#cccccc"
                }
            },
            "splitLine": {
                "show": false,
                "lineStyle": {
                    "color": [
                        "#eeeeee",
                        "#333333"
                    ]
                }
            },
            "splitArea": {
                "show": true,
                "areaStyle": {
                    "color": [
                        "rgba(250,250,250,0.05)",
                        "rgba(200,200,200,0.02)"
                    ]
                }
            }
        },
        "toolbox": {
            "iconStyle": {
                "normal": {
                    "borderColor": "#999"
                },
                "emphasis": {
                    "borderColor": "#666"
                }
            }
        },
        "legend": {
            "textStyle": {
                "color": "#cccccc"
            }
            ,"icon":"circle"
            ,"itemWidth":10
        },
        "tooltip": {
            "axisPointer": {
                "lineStyle": {
                    "color": "#ccc",
                    "width": 1
                },
                "crossStyle": {
                    "color": "#ccc",
                    "width": 1
                }
            }
        },
        "timeline": {
            "lineStyle": {
                "color": "#8fd3e8",
                "width": 1
            },
            "itemStyle": {
                "normal": {
                    "color": "#8fd3e8",
                    "borderWidth": 1
                },
                "emphasis": {
                    "color": "#8fd3e8"
                }
            },
            "controlStyle": {
                "normal": {
                    "color": "#8fd3e8",
                    "borderColor": "#8fd3e8",
                    "borderWidth": 0.5
                },
                "emphasis": {
                    "color": "#8fd3e8",
                    "borderColor": "#8fd3e8",
                    "borderWidth": 0.5
                }
            },
            "checkpointStyle": {
                "color": "#8fd3e8",
                "borderColor": "rgba(138,124,168,0.37)"
            },
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#8fd3e8"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#8fd3e8"
                    }
                }
            }
        },
        "visualMap": {
            "color": [
                "#8a7ca8",
                "#e098c7",
                "#cceffa"
            ]
        },
        "dataZoom": {
            "backgroundColor": "rgba(0,0,0,0)",
            "dataBackgroundColor": "rgba(255,255,255,0.3)",
            "fillerColor": "rgba(167,183,204,0.4)",
            "handleColor": "#a7b7cc",
            "handleSize": "100%",
            "textStyle": {
                "color": "#333"
            }
        },
        "markPoint": {
            "label": {
                "normal": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                },
                "emphasis": {
                    "textStyle": {
                        "color": "#eeeeee"
                    }
                }
            }
        }
    });
}));
本文由

echarts社区
中查找修改

艾小逗
关注
  • 4
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
element-vue+echarts 竖状树形图，组织机构图组合
qq_31083285的博客
06-20 2623
需求：用element-vue + echarts（4.2.1）搞一个竖状树形图，实现展示组织机构。大概如图1-1： 代码可能会比较乱，因为想把能遇到的各种情况都展示一下，给以后善忘的自己做个笔记。代码由https://www.jb51.net/article/205503.htm这位博主（简称A大哥）的示例简单改动而来，感谢A大哥示例。 知识点： 1. echarts symbol的类型，可圆形，可矩形，可三角，可图片等等，参考地址：https://www.cnblogs.com/silent0
echarts拓扑图
sinat_28761919的博客
07-02 6226
前台代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <link rel="stylesheet"href="../../framework/css/stationTopology.c...
echarts升级版关系图，网络拓扑图，资源关系图，可添加，搜索（支持高亮显示），排序，删除
11-19
echarts升级版关系图，网络拓扑图，资源关系图，可添加，搜索（支持高亮显示），排序，删除
使用echarts画设备拓扑图
知无涯
03-26 1万+
开发需求背景 今天领导派了一个小活，要求我将公司的物联网平台的网络拓扑图画出来。做一个数据展示的页面，集成到现有的iot平台上。 说到拓扑图，大家都也都比较清楚，能够清晰地表示网络链路的链接关系。 官方一点的解释是： 网络拓扑结构是指用传输媒体互连各种设备的物理布局（将参与LAN工作的各种设备用媒体互连在一起有多种方法，但是实际上只有几种方式能适合LAN的工作）。 网络拓扑图是指由网络节点设备和通信介质构成的网络结构图。 一般的拓扑图都是这样子的 还有这一种 这些设计图都是架构师使用软件画出来的，数据都
使用ECharts创建动态数据可视化图表
最新发布
聚娃科技开发者博客
06-28 1015
强大的可定制性：支持多种类型的图表，如折线图、柱状图、饼图等，并且可以自定义图表样式和交互行为。丰富的数据展示能力：支持动态数据更新和实时刷新，适用于需要频繁更新数据的场景。跨平台兼容性：可以在各种现代浏览器和移动设备上运行，并支持响应式设计。通过以上步骤，您已经学会了如何使用ECharts创建动态数据可视化图表。在实际应用中，您可以根据具体需求，进一步定制图表样式和交互效果，以满足不同的业务场景需求。ECharts强大的可定制性和丰富的数据展示能力，使其成为Web应用开发中不可或缺的重要工具。
Echarts中树状图的使用
2201_75474092的博客
04-19 786
【代码】Echarts中树状图的使用。
echarts中的树形结构图在移动端横屏展示 2
van的博客
07-04 5288
之前写过一篇关于echarts-tree的文章，那时候是在echarts没有升级为4.1.0之前，附上我之前写的效果图，死丑。 这是echarts版本升级记录，可以看优化了哪些功能 4.1.0：[Feature] 支持树图的布局：从右向左，从下向上。#7351#7154。查看示例tree-orient-right-left，tree-vertical。 新增了这两个布局，让我们用于在移动...
ECharts关系图、流程图、导向图(详细示例——满满的注释)
陈新科的博客
12-22 1万+
具体代码如下： init() { var myChart = this.$echarts.init(document.getElementById("main")); var option = { title: { // text: "流程", }, series: [ { type: "graph", //关系图 layout:...
echarts树图-实现拓扑图效果
itmacy的博客
04-24 936
【代码】echarts树图-实现拓扑图效果。
使用echarts制作拓扑图
热门推荐
林雨静
01-24 3万+
使用echarts制作拓扑图1.首先是设置option，设置基本属性。this.option = { title: { text: '', }, tooltip:{}, // animationDurationUpdate: 10, // anim
echart拓扑图单节点拖拽.zip
02-09
拓扑图是用于展示网络、系统或者流程之间关系的一种图表，它通常由节点（代表实体）和连接线（表示关系）组成。在ECharts中，拓扑图可以通过`echarts.init()`初始化一个图表实例，然后使用`setOption()`方法配置图表...
echart拓扑图单节点拖拽互不影响demo
04-22
这对于构建动态网络拓扑、流程图等应用非常有用。 首先，让我们了解ECharts中拓扑图的基本概念。拓扑图是ECharts提供的图形类型之一，它允许用户展示具有层次结构的数据，如网络设备分布、系统架构等。在拓扑图中，...
echartst拓扑图数据传输图.rar
06-12
拓扑图在 IT 领域中广泛用于表示网络、系统或流程之间的连接关系。ECharts 的拓扑图支持自定义节点形状、连接线样式，以及交互功能，如拖拽、缩放、平移等。这种图表特别适合用来展示设备间的通信路径、服务器集群的...
javascipt拓扑图
12-16
JavaScript拓扑图是一种在网页上展示复杂网络结构或者组织关系的有效方式，通常用于数据可视化、流程图、系统架构展示等领域。这种技术结合了JavaScript库，如JQuery（JQ）和其他专为绘制图形设计的库，如D3.js或...
CSDN知识图谱插件分享，拓扑图插件分享
09-11
拓扑图则是展示系统组件之间相互连接的图形表示，常见于网络、IT基础设施或软件架构的可视化。它能清晰地显示各个组件的层次结构、依赖关系和工作流程，对于故障排查、性能优化和系统设计具有极大的价值。在描述中...
echars实现拓扑图
xl1206的专栏
03-13 1026
echarts连接：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H 讲解：https://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html 代码： jsp： <script type="text/javascript" src="http://echa...
vue中echarts书写拓扑图
技术改变生活
01-26 8841
最近在做拓扑图找了下前端常用的组件：jTopo（感觉有点老）、Vis.js（文档是英文的，不太容易读）、D3（功能强大需要自己实现）、ECharts（同样需要自己实现） 由于图形上的交互并没有需要特别多所以用了echart - graph，文档地址：https://echarts.apache.org/zh/option.html#series-graph 这是展示样子 dom节点 <div :style="{ height: cellHeight, width: '100%' }.
使用echart实现系统逻辑拓扑图效果
cauckfgf的专栏
08-09 1255
感谢开源 echart 本身不支持gif，gif 需要使用绝对定位来实现。具体demo。
如何用python画配电系统图
fernandoli的博客
04-12 849
图中，10-0-01表示10kV进线断路器，B01和B02代表两个变压器，4-0-01表示变压器的低压侧断路器，这个断路器会分成几段母线，分别接至各个负载的出线断路器，比如4-1-02等。第5个参数：initial_tree_depth，初始化时树的深度，因为树的层级过多，初始化时会自动收缩部分层级，为了全部显示所有层级，我设置成尽可能大的值：8。第4个参数：edge_shape，连接线的样式，curve表示曲线，polyline表示折线，如需求图所示，我设置成polyline。
echarts关系拓扑图示例
11-17
ECharts关系拓扑图示例是一种数据可视化的技术，可以用于展示各种复杂的关系网络。它主要通过节点和边来表示各种不同实体之间的相互关系，通过图形直观地呈现出来。 在ECharts关系拓扑图示例中，节点通常代表一个实体，比如一个人、一个地点或者一个事件，而边则代表这些实体之间的关联或连接。通过调整节点和边的位置、大小、颜色等参数，可以直观地展现出各种复杂的关系网络，让用户可以快速地理解和分析数据。 在实际应用中，ECharts关系拓扑图示例可以用于各种领域。比如在社交网络中，可以将用户表示为节点，好友关系表示为边，通过可视化展示用户之间的社交网络关系；在物流领域，可以将仓库、货物、运输路线等表示为节点，运输关系表示为边，帮助物流企业实时监控物流网络，优化运输路径。 总的来说，ECharts关系拓扑图示例是一种非常有效的数据可视化方式，可以帮助用户直观地理解和分析复杂的关系网络，提高工作效率，促进数据驱动的决策。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值