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

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

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绘制曲线图问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。