怎么在django中利用echart绘制曲线图

tangjin

作者

怎么在django中利用echart绘制曲线图？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

views：

<!--/.row-->
<divclass="row">
<divclass="col-xs-12">
<!--interactivechart-->
<divclass="boxbox-primary">
<divclass="box-headerwith-border">
<iclass="fafa-bar-chart-o"></i>

<h4class="box-title">网络趋势</h4>
<divclass="box-toolspull-right">
<buttontype="button"class="btnbtn-box-tool"data-widget="collapse"><iclass="fafa-minus"></i>
</button>
<buttontype="button"class="btnbtn-box-tool"data-widget="remove"><iclass="fafa-times"></i></button>
</div>
</div>
<divclass="box-body">
<divclass="row">
<divclass="col-md-9">
</div>
<divclass="col-md-3">
<formaction=""method="post"id="net_range">
<divclass="box-tools">
<divclass="form-group">
<selectonchange="submitForm_net();"class="form-controlselect2"name="select_net">
<spanclass="glyphiconglyphicon-searchform-control-feedback"></span>
<optionselected="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>
<divclass="net"id="net-grow-chart"></div>
</div>
<!--/.box-body-->
</div>
<!--/.box-->

</div>
<!--/.col-->
</div>
<!--/.row-->

选择框：

//表单提交
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})

效果图：