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中的条件判断语句与循环语句用法小结
Mar 21 Python
Python编码类型转换方法详解
Jul 01 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
Jul 27 Python
Python3.7实现中控考勤机自动连接
Aug 28 Python
python使用__slots__让你的代码更加节省内存
Sep 05 Python
Python Pandas批量读取csv文件到dataframe的方法
Oct 08 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
Nov 14 Python
Python爬虫beautifulsoup4常用的解析方法总结
Feb 25 Python
linux下安装python3和对应的pip环境教程详解
Jul 01 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
Aug 22 Python
PyCharm如何导入python项目的方法
Feb 06 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
May 25 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
投票管理程序
2006/10/09 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
Js切换功能的简单方法
2010/11/23 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
python实现电子词典
2020/04/23 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
python中pop()函数的语法与实例
2020/12/01 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
StringBuilder和String的区别
2015/05/18 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
促销活动策划方案
2014/01/12 职场文书
公司门卫岗位职责
2014/03/15 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
党支部季度考核意见
2015/06/02 职场文书