django+echart绘制曲线图的方法示例
更新时间：2018年11月26日 08:28:22 作者：bitko
这篇文章主要介绍了django+echart绘制曲线图的方法示例，可以了解Django中aggregate和annotate函数的使用方法及其Django+Echarts绘制柱状图的完整示例，感兴趣的小伙伴们可以参考一下
声明：请事先到官网下载echarts，另外本文引用了adminlte模板构建前台页面
views：
<!-- /.row -->
<div class="row">
<div class="col-xs-12">
<!-- interactive chart -->
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">网络趋势</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-9">
</div>
<div class="col-md-3">
<form action="" method="post" id="net_range">
<div class="box-tools">
<div class="form-group" >
<select onchange="submitForm_net();" class="form-control select2" style="width: 100%;" name="select_net">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
<option selected="selected">{{ net_range_default }}</option>
<option>0.5小时</option>
<option>1小时</option>
<option>1天 </option>
<option>7天 </option>
<option>30天 </option>
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</form>
</div>
<!-- /.row -->
</div>
<div class="net" id="net-grow-chart" style="height: 300px;"></div>
</div>
<!-- /.box-body-->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
选择框 ：
//表单提交
function submitForm_net(){
var form_net = document.getElementById("net_range");
form_net.submit();
}
ECAHRTS:
// #################### 【网络流量趋势】图形 ####################
var myChart_net_grow = echarts.init(document.getElementById('net-grow-chart'));
option_net_grow = {
title: {
text: '网络流量',
subtext: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data:['接收流量(kbps)','发送流量(kbps)']
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
zlevel: 1,
data: [{% for i in netgrow_list %}'{{ i.chk_time | date:"m-d H:i:s" }}',{% endfor %}]
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
},
axisPointer: {
snap: true
},
max:100,
min:0
},
series: [
{
name:'接收流量(kbps)',
type:'line',
smooth: true,
data: [{% for i in netgrow_list %}{{ i.recv_kbps }},{% endfor %}]
},
{
name:'发送流量(kbps)',
type:'line',
smooth: true,
data: [{% for i in netgrow_list %}{{ i.send_kbps }},{% endfor %}]
}
]
};
myChart_net_grow.showLoading(); //显示loading
setInterval(function () {
myChart_net_grow.hideLoading(); //显示完成后不显示loading
myChart_net_grow.setOption(option_net_grow, true);
},500);
VIEWS:
@login_required(login_url='/login')
def linux_monitor(request):
messageinfo_list = models.TabAlarmInfo.objects.all()
tagsdefault = request.GET.get('tagsdefault')
if not tagsdefault:
tagsdefault = models.TabLinuxServers.objects.order_by('tags')[0].tags
cpu_range_defualt = request.GET.get('cpu_range_default')
if not cpu_range_defualt:
cpu_range_defualt = '1小时'.decode("utf-8")
mem_range_default = request.GET.get('mem_range_default')
if not mem_range_default:
mem_range_default = '1小时'.decode("utf-8")
net_range_default = request.GET.get('net_range_default')
if not net_range_default:
net_range_default = '1小时'.decode("utf-8")
hostinfo = models.TabLinuxServers.objects.all().order_by('tags')
net_begin_time = tools.range(net_range_default)
cpu_begin_time = tools.range(cpu_range_defualt)
mem_begin_time = tools.range(mem_range_default)
end_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
netgrow = models.OsInfoHis.objects.filter(tags=tagsdefault, recv_kbps__isnull=False).filter(
chk_time__gt=net_begin_time, chk_time__lt=end_time).order_by('-chk_time')
netgrow_list = list(netgrow)
netgrow_list.reverse()
cpugrow = models.OsInfoHis.objects.filter(tags=tagsdefault, cpu_used__isnull=False).filter(
chk_time__gt=cpu_begin_time, chk_time__lt=end_time).order_by('-chk_time')
cpugrow_list = list(cpugrow)
cpugrow_list.reverse()
memgrow = models.OsInfoHis.objects.filter(tags=tagsdefault, mem_used__isnull=False).filter(
chk_time__gt=mem_begin_time, chk_time__lt=end_time).order_by('-chk_time')
memgrow_list = list(memgrow)
memgrow_list.reverse()
diskinfos = models.OsFilesystem.objects.filter(tags=tagsdefault)
try:
osinfo = models.OsInfo.objects.get(tags=tagsdefault)
except models.OsInfo.DoesNotExist:
osinfo = models.OsInfoHis.objects.filter(tags=tagsdefault,cpu_used__isnull=False).order_by('-chk_time')[0]
if request.method == 'POST':
if request.POST.has_key('select_tags') or request.POST.has_key('select_cpu')or request.POST.has_key('select_mem') or request.POST.has_key('select_net'):
if request.POST.has_key('select_tags'):
tagsdefault = request.POST.get('select_tags', None).encode("utf-8")
elif request.POST.has_key('select_net'):
net_range_defualt = request.POST.get('select_net',None)
elif request.POST.has_key('select_cpu'):
cpu_range_defualt = request.POST.get('select_cpu',None)
elif request.POST.has_key('select_mem'):
mem_range_default = request.POST.get('select_mem', None)
return HttpResponseRedirect('/linux_monitor?tagsdefault=%s&net_range_default=%s&cpu_range_default=%s&mem_range_default=%s' %(tagsdefault,net_range_default,cpu_range_defualt,mem_range_default))
else:
logout(request)
return HttpResponseRedirect('/login/')
if messageinfo_list:
msg_num = len(messageinfo_list)
msg_last = models.TabAlarmInfo.objects.latest('id')
msg_last_content = msg_last.alarm_content
tim_last = (datetime.datetime.now() - msg_last.alarm_time).seconds / 60
return render_to_response('linux_monitor.html', {'netgrow_list':netgrow_list,'cpugrow_list':cpugrow_list,'memgrow_list':memgrow_list, 'tagsdefault':tagsdefault, 'hostinfo':hostinfo, 'osinfo': osinfo,'net_range_default':net_range_default,'cpu_range_default':cpu_range_defualt,'mem_range_default':mem_range_default, 'messageinfo_list': messageinfo_list,
'msg_num': msg_num,'msg_last_content': msg_last_content, 'tim_last': tim_last,'diskinfos':diskinfos})
else:
return render_to_response('linux_monitor.html', {'netgrow_list':netgrow_list,'cpugrow_list':cpugrow_list,'memgrow_list':memgrow_list, 'tagsdefault':tagsdefault, 'hostinfo':hostinfo, 'osinfo': osinfo,'net_range_default':net_range_default,'cpu_range_default':cpu_range_defualt,'mem_range_default':mem_range_default,'diskinfos':diskinfos})
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家分享了一个实时分析日志的python小脚本，文中给出了详细的介绍和示例代码供大家参考学习，对大家学习或者使用python具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了Python虚拟环境Virtualenv简明教程,本文整合了两篇关于Virtualenv的使用教程,相信大家有通过本文一定可以学会如何使用Virtualenv,需要的朋友可以参考下2015-05-05
阈值处理是一种简单、有效的将图像划分为前景和背景的方法。图像分割通常用于根据对象的某些属性(例如，颜色、边缘或直方图)从背景中提取对象。本文将为大家详细介绍OpenCV中的阈值处理，需要的可以参考一下2022-02-02
下面小编就为大家带来一篇浅谈终端直接执行py文件,不需要python命令。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
在本篇文章里小编给大家整理的是一篇关于python中Pexpect的工作流程实例讲解内容，有兴趣的朋友们可以学习下。2021-03-03
这篇文章主要介绍了pycharm使用anaconda全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
本文主要介绍了Python通过psd-tools解析PSD文件的实现，主要包括如何获取PSD文件的基本信息、遍历图层、提取图层详细信息、保存和创建PSD文件，感兴趣的可以了解一下2023-12-12
在Python编程中，get()函数是字典（Dictionary）对象中非常有用的函数，本文将详细介绍get()函数的用法及示例代码，感兴趣的可以了解一下2023-11-11
Python正则表达式函数match()和search()使用全面指南
在Python中,正则表达式是强大的工具,能够用于文本匹配、搜索和替换,re模块提供了许多函数来处理正则表达式,其中match()和search()是两个常用的函数,本文将深入探讨这两个函数的用法、区别和示例,帮助你更好地理解它们的功能2024-01-01
这篇文章主要介绍了python执行系统命令4种方法与比较,需要的朋友可以参考下2021-04-04
最新评论