怎么在django中利用echart绘制曲线图-创新互联

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

创新互联是一家以网络技术公司,为中小企业提供网站维护、网站设计制作、做网站、网站备案、服务器租用、申请域名、软件开发、小程序设计等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站联系热线:18980820575

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>
 
       <h4 class="box-title">网络趋势</h4>
         <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"  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" ></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})

效果图:

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

关于怎么在django中利用echart绘制曲线图问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。

网页名称:怎么在django中利用echart绘制曲线图-创新互联
文章分享:https://www.cdcxhl.com/article0/ehpio.html

成都网站建设公司_创新互联,为您提供企业建站网站收录移动网站建设手机网站建设自适应网站微信小程序

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设