主题
使用 java echarts 实现网卡流量实时监控折线图。
html主要代码
<div>
<label>网口:</label>
<select id="network" name="network" th:with="networks = ${@ferry.getNetworkList()}">
<option th:each="network:${networks}" th:text="${network}" th:value="${network}"></option>
</select>
</div>
<div>
<label>流量单位:</label>
<select id="flowUnit" name="flowUnit">
<option value="KB">KB</option>
<option value="MB">MB</option>
<option value="GB">GB</option>
</select>
</div>
<div>
<div class="echarts" id="flowReportChart"></div>
</div>
js主要代码
$(function (){
echarts.init(document.getElementById('flowReportChart')).dispose();
chart();
})
function searchChart(){
$("#flowReportChart").removeAttr("_echarts_instance_").empty();
echarts.init(document.getElementById('flowReportChart')).dispose();
chart();
}
function chart(){
var i = 0;
var myChart = echarts.init(document.getElementById('flowReportChart'));
let data = [];
var option = {
title: {
text: '网口流量实时监控'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: true
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
},
name: '时间'
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: true
},
name: '('+$("#flowUnit").find("option:selected").val()+'/S)'
},
series: [
{
name: '流量速度',
type: 'line',
showSymbol: false,
data: data,
color: ["rgb(84,112,198)"],
}
]
};
setInterval(function () {
$.get(ctx + "ferry/flowReport/info/"+$("#network").find("option:selected").val()+"/"+$("#flowUnit").find("option:selected").val(), function(result){
if(i>60){
data.shift();
}else{
i++;
}
data.push({
name:new Date().toString(),
value: [
new Date(),
result
]
});
myChart.setOption({
series: [
{
data: data
}
]
});
});
}, 1000);
option && myChart.setOption(option);
}
java主要代码
//获取
@GetMapping("/info/{network}/{flowUnit}")
public @ResponseBody
Double checkPlanAll(@PathVariable("network") String network,@PathVariable("flowUnit") String flowUnit)
{
try {
ProcessBuilder pb = new ProcessBuilder("/bin/bash", /cds/data/flowNetwork.sh, network);
pb.redirectErrorStream(true);//合并标准错误和标准输出
Process pr = pb.start();
// 读取输出,脚本运行结束后获取返回值,流的转换
BufferedReader br = new BufferedReader(new InputStreamReader(pr.getInputStream()));
String line = br.readLine();
pr.waitFor();
br.close();
if(line != null && !line.equals("")){
if(flowUnit.equals("KB")){
return new BigDecimal(Double.parseDouble(line)/1024).setScale(5, BigDecimal.ROUND_HALF_UP).doubleValue();
}else if(flowUnit.equals("MB")){
return new BigDecimal(Double.parseDouble(line)/(1024*1024)).setScale(5, BigDecimal.ROUND_HALF_UP).doubleValue();
}else if(flowUnit.equals("GB")){
return new BigDecimal(Double.parseDouble(line)/(1024*1024*1024)).setScale(5, BigDecimal.ROUND_HALF_UP).doubleValue();
}
}
return Double.parseDouble("0");
} catch (Exception e) {
return Double.parseDouble("0");
}
}
//获取所有网卡名
@Service("ferry")
public class FerryService
{
public List<String> getNetworkList()
{
try{
line = new ArrayList<>();
String cmd = "cat /proc/net/dev";
Process p = Runtime.getRuntime().exec(cmd);//执行
LineNumberReader input = new LineNumberReader(new InputStreamReader(p.getInputStream()));
String s = "";
int i = 0;
while ((s=input.readLine()) != null){
i++;
if(i>2){
String net = s.trim().substring(0,s.trim().indexOf(":"));
if(net.contains("enp")){
line.add(net);
}
}
}
input.close();
}catch (Exception e){
e.printStackTrace();
}
return line;
}
}
#!/bin/bash
ethn=$1
RX_pre=$(cat /proc/net/dev | grep $ethn | sed 's/:/ /g' | awk '{print $2}')
sleep 1
RX_next=$(cat /proc/net/dev | grep $ethn | sed 's/:/ /g' | awk '{print $2}')
RX=$((${RX_next}-${RX_pre}))
echo $RX