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社区
中查找修改