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

脚本专栏 2025/10/24 佚名

3 2 1

声明：请事先到官网下载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"text-align: center">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。