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})

效果图：

来源：https://blog.csdn.net/gumengkai/article/details/80055843