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


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



效果图：



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