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].imgsymbol: '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') {// CommonJSfactory(exports, require('echarts'));} else {// Browser globalsfactory({}, 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社区
中查找修改

echarts网络拓扑图动态流程图相关推荐

ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
HTML5 网络拓扑图整合 OpenLayers 实现 GIS 地图应用
在前面<百度地图.ECharts整合HT for Web网络拓扑图应用>我们有介绍百度地图和 HT for Web 的整合,我们今天来谈谈 OpenLayers 和 HT for Web ...
绘制网络拓扑图的素材
看看这些对于内容对你绘制网络拓扑图有没有帮助. 转载于:https://blog.51cto.com/403654/84482
DL之Keras：keras保存网络结构、网络拓扑图、网络模型(json、yaml、h5等)注意事项及代码实现
DL之Keras:keras保存网络结构.网络拓扑图.网络模型(json.yaml.h5等)注意事项及代码实现目录 keras保存网络结构.网络拓扑图.网络模型(json.yaml.h5等)注意事项 ...
visio网络拓扑图_人船模型怎么画？分享高颜值模型图软件
人船模型是指一个原本处于静态的系统,通过互相作用后,在一个方向上达到动量守恒. "人船模型"是由人和船两个物体构成的系统,一个人从船头走到船尾,船停在静止的水面上,设人的质量为m, ...
visjs使用小记-1.创建一个简单的网络拓扑图
1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head><title> ...
api zabbix 拓扑图获取_zabbix网络拓扑图配置-Maps(示例代码)
zabbix network map"可以简单的理解为动态网络拓扑图,可以针对业务来配置zabbix map,通过map可以了解应用的整体状况:服务器是否异常.网络是否有故障.应用当前什么状 ...
基于 HTML5 Canvas 绘制的电信网络拓扑图
电信网结构(telecommunication network structure)是指电信网各种网路单元按技术要求和经济原则进行组合配置的组合逻辑和配置形式.组合逻辑描述网路功能的体系结构,配置形式 ...
网络拓扑图画图工具_写了100多篇原创文章，我常用的在线工具网站推荐给大家！...
不知不觉写博客已经一年多了,累计写了100多篇原创文章,今天给大家分享下我经常使用的在线工具网站,希望对大家有所帮助! Markdown Nice 支持自定义样式的在线Markdown编辑器,编辑完成 ...

echarts网络拓扑图动态流程图

echarts网络拓扑图动态流程图相关推荐

最新文章

热门文章