标签：name img links 网络拓扑 state var 数据传输 nodes echarts
全部样式代码打包下载：
https://download.csdn.net/download/qq_32442967/11237750
echarts原来的样式
https://gallery.echartsjs.com/editor.html?c=xH8p6JJyu0
修改为样式1
修改为样式2
代码展示
原样式访问网址查看
https://gallery.echartsjs.com/editor.html?c=xH8p6JJyu0
**样式1代码：**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网络拓扑图1</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="height: 500px;width: 100%;">
</div>
<script>
/*右侧图表数据*/
var nodesM = [
{
name: '服务器',
img: 'fwq.png'
}
];
//左侧图表数据
var nodes = [
{
name: '存储设备1',
img: 'cc.png',
state: '1'
},
{
name: '存储设备2',
img: 'cc.png',
state: '1'
},
{
name: '防火墙',
img: 'fhq.png',
state: '0'
},
{
name: '网络设备1',
img: 'wlsb.png',
state: '1'
},
{
name: '网络设备2',
img: 'wlsb.png',
state: '0'
},
{
name: '网络设备3',
img: 'wlsb.png',
state: '1'
}
];
var charts = {
nodes: [],
links: [],
linesData: []
};
var x = 1;
var y = 1;
var dataMap = new Map();
for (var j = 0; j < nodes.length; j++) {
var node = {
name: nodes[j].name,
value: [x, y],
symbolSize: 40,
symbol: 'image://images/' + nodes[j].img,
itemStyle: {
normal: {
color: '#12b5d0',
}
}
};
dataMap.set(nodes[j].name, [x, y]);
charts.nodes.push(node);
y += 2;
}
//右侧数据显示
for (var k = 0; k < nodesM.length; k++) {
var node = {
name: nodesM[k].name,
value: [x + 4, y / 2],
symbolSize: 60,
symbol: 'image://images/' + nodesM[k].img
};
dataMap.set(nodesM[k].name, [x + 4, y / 2]);
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
}
},
lineStyle: {
normal: {
color: '#d1d1d1'
}
}
};
charts.links.push(link);
//判断传输状态1 传输动效改变线条颜色
if (nodes[i].state === '1') {
link.lineStyle.normal.color = '#0fff17';
var lines = [{
coord: dataMap.get(nodes[i].name)
}, {
coord: dataMap.get(nodesM[0].name)
}];
charts.linesData.push(lines)
}
}
option = {
title: {
text: '网络拓扑图',
textStyle: {
fontWeight: 'normal',
color: "#FFF"
}
},
backgroundColor: "#1b2735",
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: '#FFF'
}
},
lineStyle: {
normal: {
width: 2,
shadowColor: 'none',
curveness: '0.06'
}
},
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,
trailLength: 0,
symbol: 'arrow',
color: '#0fff17',
symbolSize: 8
},
lineStyle: {
// 箭头曲线 curveness (0-1)
curveness: '0.06'
// }
},
data: charts.linesData
}]
};
var dom = document.getElementById("chart");
var myChart = echarts.init(dom);
myChart.setOption(option);
window.onresize = myChart.resize;
</script>
</body>
</html>
样式2代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网络拓扑图2</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="height: 500px;width: 100%;">
</div>
<script>
/*右侧服务器数据*/
var nodesM = [
{
name: '服务器',
img: 'fwq.png'
},{
name: '服务器1',
img: 'fwq.png'
},{
name: '服务器2',
img: 'fwq.png'
}
];
var nodes = [
{
name: '存储设备1',
img: 'cc.png',
state:'1'
},
{
name: '存储设备2',
img: 'cc.png',
state:'1'
},
{
name: '防火墙',
img: 'fhq.png',
state:'0'
},
{
name: '网络设备1',
img: 'wlsb.png',
state:'1'
},
{
name: '网络设备2',
img: 'wlsb.png',
state:'0'
}
];
var links = [{
source: '存储设备2',
target: '服务器1',
state:'1'
}, {
source: '存储设备1',
target: '服务器',
state:'1'
},
{
source: '防火墙',
target: '服务器',
state:'0'
},
{
source: '网络设备1',
target: '服务器',
state:'1'
},
{
source: '网络设备2',
target: '服务器',
state:'0'
}
];
var charts = {
nodes: [],
links: [],
linesData: []
};
var x = 1;
var y = 1;
var dataMap = new Map();
for(var j = 0; j < nodes.length; j++) {
var node = {
name: nodes[j].name,
value: [x, y],
symbolSize: 50,
symbol: 'image://images/' + nodes[j].img,
itemStyle: {
normal: {
color: '#12b5d0',
}
}
};
dataMap.set(nodes[j].name, [x, y]);
charts.nodes.push(node);
y+=2;
}
//右侧数据显示
for (var k = 0; k < nodesM.length; k++){
var node = {
name: nodesM[k].name,
value: [x+4, y/nodesM.length+k*2],
symbolSize: 60,
symbol: 'image://images/'+nodesM[k].img,
itemStyle: {
normal: {
color: '#12b5d0',
}
}
};
dataMap.set(nodesM[k].name, [x+4, y/nodesM.length+k*2]);
charts.nodes.push(node)
}
for(var i = 0; i < links.length; i++) {
//通过传输状态state 显示传输文字提示
if (links[i].state === 1){
links[i].name = '数据传输中'
} else{
links[i].name = '暂停传输中'
}
var link = {
source: links[i].source,
target: links[i].target,
// target: nodesM[0].name,
label: {
normal: {
show: true,
formatter: links[i].name
}
},
lineStyle: {
normal: {
color: '#d1d1d1'
}
}
};
charts.links.push(link);
//判断传输状态1 传输动效改变线条颜色
if(links[i].state === '1'){
link.lineStyle.normal.color='#0fff17';
var lines = [{
coord: dataMap.get(links[i].source)
}, {
coord: dataMap.get(links[i].target)
}];
charts.linesData.push(lines)
}
}
option = {
title: {
text: '网络拓扑图',
textStyle: {
fontWeight: 'normal',
color: "#FFF"
}
},
backgroundColor: "#1b2735",
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: '#FFF'
}
},
lineStyle: {
normal: {
width: 2,
shadowColor: 'none',
curveness:'0.06'
}
},
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,
trailLength: 0,
symbol: 'arrow',
color: '#0fff17',
symbolSize: 8
},
lineStyle:{
// 箭头曲线 curveness (0-1)
curveness:'0.06'
// }
},
data: charts.linesData
}]
};
var dom = document.getElementById("chart");
var myChart = echarts.init(dom);
myChart.setOption(option);
window.onresize = myChart.resize;
</script>
</body>
</html>
**内容结束**
标签：name,img,links,网络拓扑,state,var,数据传输,nodes,echarts 来源： https://blog.csdn.net/qq_32442967/article/details/91556764
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。