怎么在django中利用echart绘制曲线图
选择框 ：
//表单提交
functionsubmitForm_net(){
varform_net=document.getElementById("net_range");
form_net.submit();
}
ECAHRTS:
//####################【网络流量趋势】图形####################
varmyChart_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:[{%foriinnetgrow_list%}'{{i.chk_time|date:"m-dH:i:s"}}',{%endfor%}]
},
yAxis:{
type:'value',
axisLabel:{
formatter:'{value}'
},
axisPointer:{
snap:true
},
max:100,
min:0
},
series:[
{
name:'接收流量(kbps)',
type:'line',
smooth:true,
data:[{%foriinnetgrow_list%}{{i.recv_kbps}},{%endfor%}]
},
{
name:'发送流量(kbps)',
type:'line',
smooth:true,
data:[{%foriinnetgrow_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')
deflinux_monitor(request):
messageinfo_list=models.TabAlarmInfo.objects.all()
tagsdefault=request.GET.get('tagsdefault')
ifnottagsdefault:
tagsdefault=models.TabLinuxServers.objects.order_by('tags')[0].tags
cpu_range_defualt=request.GET.get('cpu_range_default')
ifnotcpu_range_defualt:
cpu_range_defualt='1小时'.decode("utf-8")
mem_range_default=request.GET.get('mem_range_default')
ifnotmem_range_default:
mem_range_default='1小时'.decode("utf-8")
net_range_default=request.GET.get('net_range_default')
ifnotnet_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)
exceptmodels.OsInfo.DoesNotExist:
osinfo=models.OsInfoHis.objects.filter(tags=tagsdefault,cpu_used__isnull=False).order_by('-chk_time')[0]
ifrequest.method=='POST':
ifrequest.POST.has_key('select_tags')orrequest.POST.has_key('select_cpu')orrequest.POST.has_key('select_mem')orrequest.POST.has_key('select_net'):
ifrequest.POST.has_key('select_tags'):
tagsdefault=request.POST.get('select_tags',None).encode("utf-8")
elifrequest.POST.has_key('select_net'):
net_range_defualt=request.POST.get('select_net',None)
elifrequest.POST.has_key('select_cpu'):
cpu_range_defualt=request.POST.get('select_cpu',None)
elifrequest.POST.has_key('select_mem'):
mem_range_default=request.POST.get('select_mem',None)
returnHttpResponseRedirect('/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)
returnHttpResponseRedirect('/login/')
ifmessageinfo_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
returnrender_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:
returnrender_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})效果图：
关于怎么在django中利用echart绘制曲线图问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注恰卡编程网行业资讯频道了解更多相关知识。
发布于 2021-04-08 13:37:06