因为网络与磁盘的存储是一致的，故而。可以使用双饼图实现：
定义双饼图：
#-*- coding: utf-8 -*- import datetime from pyecharts import Liquid,Gauge,Pie,Line class Chart(object): #定义双饼图 def pie_two_html(self, chart_id, title, sub_title1, sub_title2, key1, key2, val1, val2): # 实例化饼状图 pie = Pie( "{}-{}".format(self.dt, title), title_pos="center", width="100%", height=300, title_text_size=14, title_color="white" ) # 指定ID pie.chart_id = chart_id # 绑定属性和值 pie.add( sub_title1, key1, val1, center=[25, 50],#空心圆 is_random=True, radius=[30, 75], rosetype="area", is_legend_show=False, is_label_show=True ) pie.add( sub_title2, key2, val2, center=[75, 50], is_random=True, radius=[30, 75], rosetype="area", is_legend_show=False, is_label_show=True ) return pie.render_embed() #定义一个时间方法 @property def dt(self): return datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
网络与存储的html
<div class="col-md-12"> <div class="card text-white bg-dark mb-3"> <div class="card-header">内存/交换分区信息</div> <div class="card-body"> <div class="row"> <div class="col-md-6 pad-right"> <div class="border border-white">{% raw data['mem_gauge'] %}</div> <table class="table table-sm table-bordered"> <tr> <td class="text-primary" style=" 30%">使用率（%）</td> <td id="mem_percent" class="text-danger">{{ data['mem_info']['percent'] }}</td> </tr> <tr> <td class="text-primary" style=" 30%">总量（GB）</td> <td id="mem_total" class="text-danger">{{ data['mem_info']['total'] }}</td> </tr> <tr> <td class="text-primary" style=" 30%">使用量（GB）</td> <td id="mem_used" class="text-danger">{{ data['mem_info']['used'] }}</td> </tr> <tr> <td class="text-primary" style=" 30%">剩余量（GB）</td> <td id="mem_free" class="text-danger">{{ data['mem_info']['free'] }}</td> </tr> </table> </div> <div class="col-md-6 pad-left"> <div class="border border-white">{% raw data['swap_gauge'] %}</div> <table class="table table-sm table-bordered"> <tr> <td class="text-primary" style=" 30%">使用率（%）</td> <td id="swap_percent" class="text-danger">{{ data['swap_info']['percent'] }}</td> </tr> <tr> <td class="text-primary" style=" 30%">总量（GB）</td> <td id="swap_total" class="text-danger">{{ data['swap_info']['total'] }}</td> </tr> <tr> <td class="text-primary" style=" 30%">使用量（GB）</td> <td id="swap_used" class="text-danger">{{ data['swap_info']['used'] }}</td> </tr> <tr> <td class="text-primary" style=" 30%">剩余量（GB）</td> <td id="swap_free" class="text-danger">{{ data['swap_info']['free'] }}</td> </tr> </table> </div> </div> </div> </div> </div> <div class="col-md-12"> <div class="card text-white bg-dark mb-3"> <div class="card-header">网络信息</div> <div class="card-body"> <div class="row"> {% for v in data['net_pie'] %} <div class="col-md-12"> <div class="border border-white">{% raw v %}</div> </div> {% end %} <div class="col-md-12"> <table class="table table-sm table-bordered"> <thead> <tr class="text-primary"> <th style=" 20%">网卡名称</th> <th style=" 10%">发送字节</th> <th style=" 10%">接收字节</th> <th style=" 10%">发送包数</th> <th style=" 10%">接收包数</th> <th style=" 10%">协议地址族</th> <th style=" 10%">IP地址</th> <th style=" 10%">子网掩码</th> <th style=" 10%">广播地址</th> </tr> </thead> <tbody id="tb_net"> {% for v in data['net_info'] %} <tr> <td>{{ v['name'] }}</td> <td class="text-danger">{{ v['bytes_sent'] }}</td> <td class="text-danger">{{ v['bytes_recv'] }}</td> <td class="text-danger">{{ v['packets_sent'] }}</td> <td class="text-danger">{{ v['packets_recv'] }}</td> <td>{{ v['family'] }}</td> <td>{{ v['address'] }}</td> <td>{{ v['netmask'] }}</td> <td> {% if v['broadcast'] %} {{ v['broadcast'] }} {% else %} 无 {% end %} </td> </tr> {% end%} </tbody> </table> </div> </div> </div> </div> </div> <div class="col-md-12"> <div class="card text-white bg-dark mb-3"> <div class="card-header">磁盘使用信息</div> <div class="card-body"> <table class="table table-sm table-bordered"> <thead> <tr class="text-primary"> <th style=" 10%">设备名称</th> <th style=" 10%">挂载点</th> <th style=" 10%">文件系统类型</th> <th style=" 10%">操作选项</th> <th style=" 10%">总量（GB）</th> <th style=" 10%">使用量（GB）</th> <th style=" 10%">剩余量（GB）</th> <th style=" 30%">使用量（%）</th> </tr> </thead> <tbody id="tb_disk"> {% for v in data['disk_info'] %} <tr> <td>{{ v['device'] }}</td> <td>{{ v['mountpoint'] }}</td> <td>{{ v['fstype'] }}</td> <td>{{ v['opts'] }}</td> <td class="text-danger">{{ v['used']['total'] }}GB</td> <td class="text-danger">{{ v['used']['used'] }}GB</td> <td class="text-danger">{{ v['used']['free'] }}GB</td> <td> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated{{ handler.progress_status(v['used']['percent']) }}" role="progressbar" aria-valuenow="{{ v['used']['percent'] }}" aria-valuemin="0" aria-valuemax="100" style=" {{ v['used']['percent'] }}%">{{ v['used']['percent'] }}% </div> </div> </td> </tr> {% end %} </tbody> </table> </div> </div> </div>
实时更新处理：
/*网络信息更新*/ var net = ""; for (var k in data['net']) { var cd = data['net'][k]; if (parseInt(cd['bytes_sent']) != 0 && parseInt(cd["bytes_recv"]) != 0) { var index = parseInt(k) + 1; var op = eval("option_net" + index); var ch = eval("myChart_net" + index); op.title[0].text = data["dt"] + "-" + cd["name"] + "网卡信息"; op.series[0].data = [ {"name": "收包数", "value": cd["packets_recv"]}, {"name": "发包数", "value": cd["packets_sent"]} ]; op.series[1].data = [ {"name": "收字节", "value": cd["bytes_recv"]}, {"name": "发字节", "value": cd["bytes_sent"]} ]; ch.setOption(op); } net += "<tr><td>" + cd['name'] + "</td>"; net += "<td class='text-danger'>" + cd['bytes_sent'] + "</td>"; net += "<td class='text-danger'>" + cd['bytes_recv'] + "</td>"; net += "<td class='text-danger'>" + cd['packets_sent'] + "</td>"; net += "<td class='text-danger'>" + cd['packets_recv'] + "</td>"; net += "<td>" + cd['family'] + "</td>"; net += "<td>" + cd['address'] + "</td>"; net += "<td>" + cd['netmask'] + "</td>"; if (cd['broadcast']) { net += "<td>" + cd['broadcast'] + "</td></tr>"; } else { net += "<td>无</td></tr>"; } } document.getElementById("tb_net").innerHTML = net; /*磁盘使用信息实时更新*/ var disk = ""; for (var k in data["disk"]) { var cd = data["disk"][k]; disk += "<tr><td>" + cd['device'] + "</td>"; disk += "<td>" + cd['mountpoint'] + "</td>"; disk += "<td>" + cd['fstype'] + "</td>"; disk += "<td>" + cd['opts'] + "</td>"; disk += "<td class='text-danger'>" + cd['used']['total'] + "GB</td>"; disk += "<td class='text-danger'>" + cd['used']['used'] + "GB</td>"; disk += "<td class='text-danger'>" + cd['used']['free'] + "GB</td>"; disk += "<td><div class='progress'><div class='progress-bar progress-bar-striped progress-bar-animated" + progress_status(cd['used']['percent']) + "' role='progressbar' aria-valuenow='" + cd['used']['percent'] + "' aria-valuemin='0' aria-valuemax='100' style=' " + cd['used']['percent'] + "%'>" + cd['used']['percent'] + "%</div></div></td></tr>"; } document.getElementById("tb_disk").innerHTML = disk;
结果展示：
