mirror of https://github.com/ehang-io/nps
768 lines
28 KiB
Go
Executable File
768 lines
28 KiB
Go
Executable File
<div class="wrapper wrapper-content">
|
||
<div class="row">
|
||
<div class="col-lg-3">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>客户端连接端口</h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<h1 class="no-margins">{{.p}}</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>总客户端数</h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<h1 class="no-margins">{{.data.clientCount}}</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
{{/*<span class="label label-primary pull-right">今日</span>*/}}
|
||
<h5>在线客户端数</h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<h1 class="no-margins">{{.data.clientOnlineCount}}</h1>
|
||
{{/*<div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>*/}}
|
||
{{/*<small>新访客</small>*/}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>当前TCP连接总数</h5>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<h1 class="no-margins">{{.data.tcpCount}}</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>配置信息</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content no-padding">
|
||
<ul class="list-group">
|
||
<li class="list-group-item">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>桥接模式</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.bridgeType}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>http代理端口</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.httpProxyPort}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>https代理端口</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.httpsProxyPort}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>ip限制</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.ipLimit}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>流量持久化</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.flowStoreInterval}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>日志级别</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.logLevel}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>p2p端口</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.p2pPort}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>服务端IP</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.serverIp}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>服务端版本</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.version}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="ibox-title">
|
||
<h5>系统信息</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
|
||
<div>
|
||
<div>
|
||
<span>CPU</span>
|
||
<small class="pull-right">{{.data.cpu}}%</small>
|
||
</div>
|
||
<div class="progress progress-small">
|
||
<div style="width: {{.data.cpu}}%;" class="progress-bar"></div>
|
||
</div>
|
||
|
||
|
||
<div>
|
||
<span>虚拟内存</span>
|
||
<small class="pull-right">{{.data.virtual_mem}}%</small>
|
||
</div>
|
||
<div class="progress progress-small">
|
||
<div style="width: {{.data.virtual_mem}}%;" class="progress-bar"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-content no-padding">
|
||
<ul class="list-group">
|
||
<li class="list-group-item">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>负载</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.load}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>TCP连接数（establish）</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.tcp}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>UDP连接数（establish）</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong>{{.data.udp}}</strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>出口带宽</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong id="send"></strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="list-group-item ">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<strong>入口带宽</strong>
|
||
</div>
|
||
<div class="col-sm-6 text-right">
|
||
<strong id="recv"></strong>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{if eq true .system_info_display}}
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>负载</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div id="load" style="height: 300px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>CPU</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div id="cpu" style="height: 300px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>内存</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div id="virtual_mem" style="height: 300px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>连接数</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div id="conn_num" style="height: 300px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>带宽</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div id="bandwidth" style="height: 300px"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>流量统计</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div id="flow" style="height: 400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="ibox float-e-margins">
|
||
<div class="ibox-title">
|
||
<h5>类型</h5>
|
||
<div class="ibox-tools">
|
||
<a class="collapse-link">
|
||
<i class="fa fa-chevron-up"></i>
|
||
</a>
|
||
<a class="close-link">
|
||
<i class="fa fa-times"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ibox-content">
|
||
<div id="tj" style="height:400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
option = {
|
||
title: {
|
||
x: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (p) {
|
||
return p.seriesName + "<br>" + p.name + ":" + change(p.data.value);
|
||
},
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
data: ['出口流量', '入口流量']
|
||
},
|
||
series: [
|
||
{
|
||
name: 'traffic',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['50%', '60%'],
|
||
data: [
|
||
{value:{{.data.inletFlowCount}}, name: '入口流量'},
|
||
{value:{{.data.exportFlowCount}}, name: '出口流量'},
|
||
],
|
||
itemStyle: {
|
||
emphasis: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
var myChart1 = echarts.init(document.getElementById('flow'));
|
||
myChart1.setOption(option);
|
||
|
||
|
||
option = {
|
||
title: {
|
||
x: 'center'
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
data: ['tcp隧道数量', 'socks5隧道数量', 'http代理隧道数量', 'udp隧道数量', '域名解析数量', '私密代理数量', 'p2p数量']
|
||
},
|
||
series: [
|
||
{
|
||
name: 'types',
|
||
type: 'pie',
|
||
radius: '55%',
|
||
center: ['50%', '60%'],
|
||
data: [
|
||
{value:{{.data.tcpC}}, name: 'tcp隧道数量'},
|
||
{value:{{.data.socks5Count}}, name: 'socks5隧道数量'},
|
||
{value:{{.data.httpProxyCount}}, name: 'http代理隧道数量'},
|
||
{value:{{.data.udpCount}}, name: 'udp隧道数量'},
|
||
{value:{{.data.hostCount}}, name: '域名解析数量'},
|
||
{value:{{.data.secretCount}}, name: '私密代理数量'},
|
||
{value:{{.data.p2pCount}}, name: 'p2p数量'},
|
||
],
|
||
itemStyle: {
|
||
emphasis: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
var myChart2 = echarts.init(document.getElementById('tj'));
|
||
myChart2.setOption(option);
|
||
$(function () {
|
||
$("#send").html(change({{.data.io_send}}) + "/s")
|
||
$("#recv").html(change({{.data.io_recv}}) + "/s")
|
||
})
|
||
|
||
|
||
var dom = document.getElementById("load");
|
||
var myChart3 = echarts.init(dom);
|
||
var app = {};
|
||
option = null;
|
||
option = {
|
||
title: {
|
||
text: '负载'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'load1',
|
||
type: 'line',
|
||
stack: 'load1',
|
||
smooth: true,
|
||
data: [{{.data.sys1.load1}}, {{.data.sys2.load1}}, {{.data.sys3.load1}}, {{.data.sys4.load1}}, {{.data.sys5.load1}}, {{.data.sys6.load1}}, {{.data.sys7.load1}}, {{.data.sys8.load1}}, {{.data.sys9.load1}}, {{.data.sys10.load1}}],
|
||
},
|
||
{
|
||
name: 'load5',
|
||
type: 'line',
|
||
stack: 'load5',
|
||
smooth: true,
|
||
data: [{{.data.sys1.load5}}, {{.data.sys2.load5}}, {{.data.sys3.load5}}, {{.data.sys4.load5}}, {{.data.sys5.load5}}, {{.data.sys6.load5}}, {{.data.sys7.load5}}, {{.data.sys8.load5}}, {{.data.sys9.load5}}, {{.data.sys10.load5}}],
|
||
},
|
||
{
|
||
name: 'load15',
|
||
type: 'line',
|
||
stack: 'load15',
|
||
smooth: true,
|
||
data: [{{.data.sys1.load15}}, {{.data.sys2.load15}}, {{.data.sys3.load15}}, {{.data.sys4.load15}}, {{.data.sys5.load15}}, {{.data.sys6.load15}}, {{.data.sys7.load15}}, {{.data.sys8.load15}}, {{.data.sys9.load15}}, {{.data.sys10.load15}}],
|
||
}
|
||
]
|
||
};
|
||
if (option && typeof option === "object") {
|
||
myChart3.setOption(option, true);
|
||
}
|
||
|
||
var dom = document.getElementById("cpu");
|
||
var myChart4 = echarts.init(dom);
|
||
var app = {};
|
||
option = null;
|
||
option = {
|
||
title: {
|
||
text: 'CPU'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'cpu',
|
||
type: 'line',
|
||
stack: 'cpu',
|
||
smooth: true,
|
||
areas: {},
|
||
data: [{{.data.sys1.cpu}}, {{.data.sys2.cpu}}, {{.data.sys3.cpu}}, {{.data.sys4.cpu}}, {{.data.sys5.cpu}}, {{.data.sys6.cpu}}, {{.data.sys7.cpu}}, {{.data.sys8.cpu}}, {{.data.sys9.cpu}}, {{.data.sys10.cpu}}],
|
||
}
|
||
]
|
||
};
|
||
if (option && typeof option === "object") {
|
||
myChart4.setOption(option, true);
|
||
}
|
||
|
||
|
||
var dom = document.getElementById("virtual_mem");
|
||
var myChart5 = echarts.init(dom);
|
||
var app = {};
|
||
option = null;
|
||
option = {
|
||
title: {
|
||
text: '内存'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'virtual_mem',
|
||
type: 'line',
|
||
stack: 'virtual_mem',
|
||
smooth: true,
|
||
areas: {},
|
||
data: [{{.data.sys1.virtual_mem}}, {{.data.sys2.virtual_mem}}, {{.data.sys3.virtual_mem}}, {{.data.sys4.virtual_mem}}, {{.data.sys5.virtual_mem}}, {{.data.sys6.virtual_mem}}, {{.data.sys7.virtual_mem}}, {{.data.sys8.virtual_mem}}, {{.data.sys9.virtual_mem}}, {{.data.sys10.virtual_mem}}],
|
||
},
|
||
{
|
||
name: 'swap_mem',
|
||
type: 'line',
|
||
stack: 'swap_mem',
|
||
smooth: true,
|
||
areas: {},
|
||
data: [{{.data.sys1.swap_mem}}, {{.data.sys2.swap_mem}}, {{.data.sys3.swap_mem}}, {{.data.sys4.swap_mem}}, {{.data.sys5.swap_mem}}, {{.data.sys6.swap_mem}}, {{.data.sys7.swap_mem}}, {{.data.sys8.swap_mem}}, {{.data.sys9.swap_mem}}, {{.data.sys10.swap_mem}}],
|
||
}
|
||
],
|
||
};
|
||
if (option && typeof option === "object") {
|
||
myChart5.setOption(option, true);
|
||
}
|
||
|
||
var dom = document.getElementById("conn_num");
|
||
var myChart6 = echarts.init(dom);
|
||
var app = {};
|
||
option = null;
|
||
option = {
|
||
title: {
|
||
text: '连接数（establish）'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'tcp',
|
||
type: 'line',
|
||
stack: 'tcp',
|
||
smooth: true,
|
||
areas: {},
|
||
data: [{{.data.sys1.tcp}}, {{.data.sys2.tcp}}, {{.data.sys3.tcp}}, {{.data.sys4.tcp}}, {{.data.sys5.tcp}}, {{.data.sys6.tcp}}, {{.data.sys7.tcp}}, {{.data.sys8.tcp}}, {{.data.sys9.tcp}}, {{.data.sys10.tcp}}],
|
||
},
|
||
{
|
||
name: 'udp',
|
||
type: 'line',
|
||
stack: 'udp',
|
||
smooth: true,
|
||
areas: {},
|
||
data: [{{.data.sys1.udp}}, {{.data.sys2.udp}}, {{.data.sys3.udp}}, {{.data.sys4.udp}}, {{.data.sys5.udp}}, {{.data.sys6.udp}}, {{.data.sys7.udp}}, {{.data.sys8.udp}}, {{.data.sys9.udp}}, {{.data.sys10.udp}}],
|
||
}
|
||
]
|
||
};
|
||
if (option && typeof option === "object") {
|
||
myChart6.setOption(option, true);
|
||
}
|
||
|
||
var dom = document.getElementById("bandwidth");
|
||
var myChart7 = echarts.init(dom);
|
||
var app = {};
|
||
option = null;
|
||
option = {
|
||
title: {
|
||
text: '带宽'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (a) {
|
||
return "in:" + change(a[0].data) + "/s<br/>" + "out:" + change(a[1].data) + "/s<br/>" + a[0].axisValue;
|
||
}
|
||
},
|
||
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['{{.data.sys1.time}}', '{{.data.sys2.time}}', '{{.data.sys3.time}}', '{{.data.sys4.time}}', '{{.data.sys5.time}}', '{{.data.sys6.time}}', '{{.data.sys7.time}}', '{{.data.sys8.time}}', '{{.data.sys9.time}}', '{{.data.sys10.time}}']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'in',
|
||
type: 'line',
|
||
stack: 'in',
|
||
smooth: true,
|
||
areas: {},
|
||
data: [{{.data.sys1.io_recv}}, {{.data.sys2.io_recv}}, {{.data.sys3.io_recv}}, {{.data.sys4.io_recv}}, {{.data.sys5.io_recv}}, {{.data.sys6.io_recv}}, {{.data.sys7.io_recv}}, {{.data.sys8.io_recv}}, {{.data.sys9.io_recv}}, {{.data.sys10.io_recv}}],
|
||
},
|
||
{
|
||
name: 'out',
|
||
type: 'line',
|
||
stack: 'out',
|
||
smooth: true,
|
||
areas: {},
|
||
data: [{{.data.sys1.io_send}}, {{.data.sys2.io_send}}, {{.data.sys3.io_send}}, {{.data.sys4.io_send}}, {{.data.sys5.io_send}}, {{.data.sys6.io_send}}, {{.data.sys7.io_send}}, {{.data.sys8.io_send}}, {{.data.sys9.io_send}}, {{.data.sys10.io_send}}],
|
||
}
|
||
]
|
||
};
|
||
if (option && typeof option === "object") {
|
||
myChart7.setOption(option, true);
|
||
}
|
||
|
||
window.addEventListener("resize", () => {
|
||
this.myChart1.resize();
|
||
this.myChart2.resize();
|
||
this.myChart3.resize();
|
||
this.myChart4.resize();
|
||
this.myChart5.resize();
|
||
this.myChart6.resize();
|
||
this.myChart7.resize();
|
||
});
|
||
|
||
</script>
|