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标准库中的wave模块绘制乐谱的简单教程
Mar 30 Python
python中列表元素连接方法join用法实例
Apr 07 Python
在Django的URLconf中进行函数导入的方法
Jul 18 Python
python数据结构之列表和元组的详解
Sep 23 Python
使用tensorflow实现线性回归
Sep 08 Python
Python 自动登录淘宝并保存登录信息的方法
Sep 04 Python
Python-Flask:动态创建表的示例详解
Nov 22 Python
Python基于内置库pytesseract实现图片验证码识别功能
Feb 24 Python
解决python图像处理图像赋值后变为白色的问题
Jun 04 Python
Python通过字典映射函数实现switch
Nov 06 Python
关于python类SortedList详解
Sep 04 Python
Python 文字识别
May 11 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
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
Javascript 解疑
2009/11/11 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Tensorflow 多线程设置方式
2020/02/06 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
超级礼物观后感
2015/06/15 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL