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中使用swapCase()方法转换大小写的教程
May 20 Python
Python实现文件复制删除
Apr 19 Python
python编写Logistic逻辑回归
Dec 30 Python
Python爬虫实例扒取2345天气预报
Mar 04 Python
浅谈Python爬虫基本套路
Mar 25 Python
.dcm格式文件软件读取及python处理详解
Jan 16 Python
Python开发企业微信机器人每天定时发消息实例
Mar 17 Python
Python实现多线程下载脚本的示例代码
Apr 03 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
Oct 20 Python
只用50行Python代码爬取网络美女高清图片
Jun 02 Python
PyMongo 查询数据的实现
Jun 28 Python
Python中的socket网络模块介绍
Jul 23 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
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js实现消息滚动效果
2017/01/18 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
《夸父追日》教学反思
2014/02/26 职场文书
群众路线领导对照材料
2014/08/23 职场文书
法人授权委托书范本
2014/09/17 职场文书
2014年教学工作总结
2014/11/13 职场文书
东京审判观后感
2015/06/01 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python