django+echart绘制曲线图的方法示例

框架(架构)  /  管理员 发布于 7年前   197

声明：请事先到官网下载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})

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。