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


Posted in Python onNovember 26, 2018

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

效果图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python base64编码解码实例
Jun 21 Python
python基于pygame实现响应游戏中事件的方法(附源码)
Nov 11 Python
python虚拟环境virtualenv的使用教程
Oct 20 Python
对numpy.append()里的axis的用法详解
Jun 28 Python
python实战教程之自动扫雷
Jul 13 Python
解决python打不开文件(文件不存在)的问题
Feb 18 Python
详解python列表(list)的使用技巧及高级操作
Aug 15 Python
python函数声明和调用定义及原理详解
Dec 02 Python
Python使用ElementTree美化XML格式的操作
Mar 06 Python
详解python metaclass(元类)
Aug 13 Python
Python通过yagmail实现发送邮件代码解析
Oct 27 Python
pycharm 配置svn的图文教程(手把手教你)
Jan 15 Python
详解配置Django的Celery异步之路踩坑
Nov 25 #Python
利用Python如何实现一个小说网站雏形
Nov 23 #Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
Nov 23 #Python
python+selenium实现自动抢票功能实例代码
Nov 23 #Python
3分钟学会一个Python小技巧
Nov 23 #Python
值得收藏,Python 开发中的高级技巧
Nov 23 #Python
python 常见字符串与函数的用法详解
Nov 23 #Python
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
PHP中的array数组类型分析说明
2010/07/27 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
Python实现自动登录百度空间的方法
2017/06/10 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python实现log日志的示例代码
2018/04/28 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
PHP统计代码行数的小代码
2019/09/19 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
应届毕业生求职信范文
2014/05/08 职场文书
品牌推广策划方案
2014/05/28 职场文书