devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Django 配合Echarts绘制图表_django+echarts

作者：不正经 | 2024-02-29 10:09:06

赞

踩

django+echarts

在前面我总结了关于DjangoAdmin的使用技巧，利用DjangoAdmin这个后台管理功能，自己定制页面可以完成非常多的功能，下面我们将重点研究主机图形的绘制，展示和报表等功能的具体实现步骤，这里也算是个人的一点点经验。

定制查询图形功能

urls.py

  1. from django.contrib import admin
  2. from django.urls import path
  3. from MyWeb import views
  4. urlpatterns = [
  5.     path('', admin.site.urls),
  6.     path("grup/",views.grup)
  7. ]

views.py

  1. from django.shortcuts import render,HttpResponse
  2. def grup(request):
  3.     if request.method == "POST":
  4.         StartData = request.POST.get("StartData")
  5.         EndData = request.POST.get("EndData")
  6.         sel = request.POST.get("selec")
  7.         print(StartData,EndData,sel)
  8.  
  9.     return render(request,"grup.html")

grup.html

  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3.  
  4. {% block content %}
  5.  
  6.     <form action="/grup/" method="post">
  7.         开始时间: <input type="datetime-local" name="StartData" />
  8.         结束时间: <input type="datetime-local" name="EndData" />
  9.  
  10.     <select name="selec">
  11.       <option value="CPU">CPU负载</option>
  12.       <option value="Mem">内存负载</option>
  13.     </select>
  14.         <input type="submit" value="查询">
  15.     </form>
  16.     <br>
  17.     <div id="main" style="width: 90%; height: 300px; border: 1px solid #eecc11; padding: 40px">
  18.     <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
  19.     <script>
  20.         var mychart = echarts.init(document.getElementById("main"));
  21.         var option = {
  22.             xAxis: {
  23.                 type: 'category',
  24.                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  25.             },
  26.             yAxis: {
  27.                 type: 'value'
  28.             },
  29.             series: [{
  30.                 data: [820, 932, 901, 934, 1290, 1330, 1320],
  31.                 type: 'line'
  32.             }]
  33.         };
  34.         mychart.setOption(option)
  35.  
  36.     </script>
  37.  
  38. {% endblock %}

更新数据 为了方便后期内容，批量填充数据.

  1. import os,sys,sqlite3
  2. import time,psutil,datetime
  3. def GetCPU_Load(addr):
  4.     dic = {}
  5.     times = datetime.datetime.now().strftime("%Y-%m-%dT%H:%M")
  6.     cpu = psutil.cpu_percent(interval=None,percpu=True)
  7.     dic["Address"] = addr
  8.     dic["Times"] = times
  9.     dic["load5"] = cpu[0]
  10.     dic["load10"] = cpu[1]
  11.     dic["load15"] = cpu[2]
  12.     return dic
  13.  
  14. if __name__ == "__main__":
  15.     conn = sqlite3.connect("db.sqlite3")
  16.     cursor = conn.cursor()
  17.     while True:
  18.         dic = GetCPU_Load("192.168.1.1")
  19.         insert = 'insert into MyWeb_cpu(Address,Times,load5,load10,load15) values("{}","{}","{}","{}","{}")'.\
  20.             format(dic["Address"],dic["Times"],dic["load5"],dic["load10"],dic["load15"])
  21.         print(insert)
  22.         cursor.execute(insert)
  23.         conn.commit()
  24.         time.sleep(1)

来看下数据库的设计。

  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3. {% load static %}
  4. {% block title %}{{ site_title|default:_('Django site admin') }}{% endblock %}
  5.  
  6. {% block content %}
  7.     <form action="/cpu/" method="post">
  8.         主机地址: <input type="text" name="Address" />
  9.         开始时间: <input type="datetime-local" name="StartData" />
  10.         结束时间: <input type="datetime-local" name="EndData" />
  11.     <select name="selec">
  12.       <option value="CPU">CPU负载</option>
  13.       <option value="Mem">内存负载</option>
  14.     </select>
  15.         <input type="submit" value="查询">
  16.     </form>
  17.  
  18.     {{ time }}
  19.     {{ load }}
  1. from django.shortcuts import render,HttpResponse
  2. from MyWeb import  models
  3. import time,datetime
  4.  
  5. def cpu(request):
  6.     if request.method == "POST":
  7.         times = []
  8.         load = []
  9.         Address = request.POST.get("Address")
  10.         StartData = request.POST.get("StartData")
  11.         EndData = request.POST.get("EndData")
  12.         ret = models.CPU.objects.raw('select * from MyWeb_cpu where Times>="{}" and Times <="{}";'.
  13.                                      format(StartData,EndData))
  14.         for item in ret:
  15.             times.append(item.Times.split("T")[1])
  16.             load.append(item.load5)
  17.         return render(request,"index.html",{"time":times,"load":load})

有个问题，没有解决，可能得用json发数据。

最后没找到解决方法，应该是要用json序列化一下就好。

  1. <!--name: index.html-->
  2. {% extends "admin/base_site.html" %}
  3. {% load i18n static %}
  4. {% load static %}
  5. {% block title %}{{ site_title|default:_('Django site admin') }}{% endblock %}
  6.  
  7. {% block content %}
  8.     <form action="/cpu/" method="post">
  9.         开始时间: <input type="datetime-local" name="StartData" />
  10.         结束时间: <input type="datetime-local" name="EndData" />
  11.     <select name="selec">
  12.       <option value="CPU">CPU Load5 负载</option>
  13.     </select>
  14.         <input type="submit" value="检索图形">
  15.     </form>
  16.  
  17.     <div id="main" style="width: 90%; height: 300px; border: 1px solid #eecc11; padding: 40px">
  18.     <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
  19.     <script>
  20.         var mychart = echarts.init(document.getElementById("main"));
  21.         var option = {
  22.             grid:{
  23.                       top:"50px",
  24.                       left:"50px",
  25.                       right:"15px",
  26.                       bottom:"50px"
  27.                   },
  28.             xAxis: {
  29.                 type: 'category',
  30.                 data: {{ cpu_data }}
  31.             },
  32.             yAxis: {
  33.                 type: 'value'
  34.             },
  35.             series: [{
  36.                 type: 'line',
  37.                 data: {{ cpu_data }}
  38.             }]
  39.         };
  40.         mychart.setOption(option)
  41.     </script>
  42. {% endblock %}

顺便加上IP查询功能，则更加完整了。

上方form表单提交后会自动清除表单内容，如果不想清空，可以使用ajax方式提交，或使用一下方法来完成.

  1. {% block content %}
  2.  
  3.     <form action="/fw/" method="post" target="not_iframe">
  4.         <input type="text" name="user"/>
  5.         <input type="submit" value="提交">
  6.     </form>
  7.  
  8.     <iframe id="id_iframe" name="not_iframe" style="display:none;"></iframe>
  9. {% endblock %}

本机仪表盘

  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3. {% load static %}
  4. {% block title %}{{ site_title|default:_('Django site admin') }}{% endblock %}
  5.  
  6. {% block content %}
  7.  
  8.     <div id="cpuChart" style="width: 32%; height: 380px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
  9.  
  10.     <div id="memChart" style="width: 32%; height: 380px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
  11.  
  12.     <div id="diskChart" style="width: 32%; height: 380px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
  13.  
  14.     <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  15.     <script>
  16.         var cpuChart = echarts.init(document.getElementById("cpuChart"));
  17.         var option = {
  18.         series: [
  19.             {
  20.                 type: 'gauge',
  21.                 detail: {formatter: '{value}%'},
  22.                 data: [{value: 44, name: 'CPU 利用率'}]
  23.             }
  24.         ]
  25.     };cpuChart.setOption(option, true);
  26.     </script>
  27.     <script>
  28.         var memChart = echarts.init(document.getElementById("memChart"));
  29.         var option = {
  30.         series: [
  31.             {
  32.                 type: 'gauge',
  33.                 detail: {formatter: '{value}%'},
  34.                 data: [{value: 25, name: '内存利用率'}]
  35.             }
  36.         ]
  37.     };memChart.setOption(option, true);
  38.     </script>
  39.     <script>
  40.         var diskChart = echarts.init(document.getElementById("diskChart"));
  41.         var option = {
  42.         series: [
  43.             {
  44.                 type: 'gauge',
  45.                 detail: {formatter: '{value}%'},
  46.                 data: [{value: 18, name: '磁盘使用量'}]
  47.             }
  48.         ]
  49.     };diskChart.setOption(option, true);
  50.     </script>
  51. {% endblock %}

增加自定义页面(本机图形监控): 除了默认页面可以使用以外,还可以自己创造一个新页面.

  1. <!--name: index.html(本机仪表盘)-->
  2. {% extends "admin/base_site.html" %}
  3. {% load i18n static %}
  4. {% load static %}
  5. {% block title %}{{ site_title|default:_('Django site admin') }}{% endblock %}
  6.  
  7. {% block content %}
  8.     <div id="cpuChart" style="width: 32%; height: 380px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
  9.     <div id="memChart" style="width: 32%; height: 380px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
  10.     <div id="diskChart" style="width: 32%; height: 380px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
  11.     <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  12.     <script>
  13.         var cpuChart = echarts.init(document.getElementById("cpuChart"));
  14.         var option = {
  15.         series: [
  16.             {
  17.                 type: 'gauge',
  18.                 detail: {formatter: '{value}%'},
  19.                 data: [{value: 44, name: 'CPU 利用率'}]
  20.             }
  21.         ]
  22.     };cpuChart.setOption(option, true);
  23.     </script>
  24.     <script>
  25.         var memChart = echarts.init(document.getElementById("memChart"));
  26.         var option = {
  27.         series: [
  28.             {
  29.                 type: 'gauge',
  30.                 detail: {formatter: '{value}%'},
  31.                 data: [{value: 25, name: '内存利用率'}]
  32.             }
  33.         ]
  34.     };memChart.setOption(option, true);
  35.     </script>
  36.     <script>
  37.         var diskChart = echarts.init(document.getElementById("diskChart"));
  38.         var option = {
  39.         series: [
  40.             {
  41.                 type: 'gauge',
  42.                 detail: {formatter: '{value}%'},
  43.                 data: [{value: 18, name: '磁盘使用量'}]
  44.             }
  45.         ]
  46.     };diskChart.setOption(option, true);
  47.     </script>
  48. {% endblock %}

动态监控平台(折线图)

绘图

  1. <div id="echo" style="width: 100%; height: 400px;  "></div>
  2. <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
  3. <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  4.  
  5.     <script type="text/javascript" charset="UTF-8">
  6.         var display = function(time,cpu1,cpu5,cpu15){
  7.   var echo =echarts.init(document.getElementById("echo"));
  8.                 var option = {
  9.                     // tooltip 鼠标放上去之后会自动出现坐标
  10.                     tooltip: {
  11.                         trigger: 'axis',
  12.                         axisPointer: {
  13.                             type: 'cross',
  14.                             label: {
  15.                                 backgroundColor: '#6a7985'
  16.                             }
  17.                         }
  18.                     },// toolbox = 菜单栏中的各种小功能
  19.                     toolbox: {
  20.                         feature: {
  21.                             dataZoom: {
  22.                                 yAxisIndex: 'none'
  23.                             },
  24.                             restore: {},
  25.                             saveAsImage: {}
  26.                         }
  27.                     },
  28.                     legend: {
  29.                         data: [ '1分钟负载', '5分钟负载', '15分钟负载']
  30.                     },
  31.  
  32.                     xAxis: {
  33.                         type: 'category',
  34.                         data: time
  35.                     },
  36.                     yAxis: {
  37.                         type: 'value'
  38.                     },
  39.                     series: [
  40.                     {
  41.                         name: "1分钟负载",
  42.                         stack: "总量",
  43.                         data: cpu1,
  44.                         type: 'line'
  45.                     },
  46.                     {
  47.                         name: "5分钟负载",
  48.                         stack: "总量",
  49.                         data: cpu5,
  50.                         type: 'line'
  51.                     },
  52.                     {
  53.                         name: "15分钟负载",
  54.                         stack: "总量",
  55.                         data: cpu15,
  56.                         type: 'line'
  57.                     }
  58.                     ]
  59.                 };
  60.                 echo.setOption(option,true);
  61.     };
  62. </script>

另一种刷新式绘图

  1. <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  2. <div id="main" style="height:500px;width:1200px;border:1px solid #eecc11;padding:10px;"></div>
  3. <script type="text/javascript" charset="UTF-8">
  4.         var display = function(time,cpu){
  5.             // 负责初始化绘图画布
  6.             var myChart = echarts.init(document.getElementById('main'));
  7.             myChart.setOption({
  8.         title: {
  9.             text: '监控系统CPU资源'
  10.         },
  11.         tooltip: {},
  12.         xAxis: {
  13.             data: []
  14.         },
  15.         yAxis: {},
  16.         series: [{
  17.             name: 'cpu',
  18.             type: 'line',
  19.             data: []
  20.         }]
  21.     });
  22.         // 下方就是给指定字段填充数据
  23.         myChart.setOption({
  24.             xAxis: {
  25.                 data: time
  26.             },
  27.             series: [{
  28.                 name: 'cpu', // 根据名字对应到相应的系列
  29.                 data: cpu
  30.             }]
  31.         });
  32.     };
  33.     // 首次显示加载动画
  34.     myChart.showLoading();
  35. </script>

数据处理

  1. // 负责对参数的解析
  2.     var time =["","","","","","","","","",""];
  3.     var cpu1 = [0,0,0,0,0,0,0,0,0,0];
  4.     var cpu5 = [0,0,0,0,0,0,0,0,0,0];
  5.     var cpu15 = [0,0,0,0,0,0,0,0,0,0];
  6.     var update = function(recv){
  7.         time.push(recv.response[0]);
  8.         cpu1.push(parseFloat(recv.response[1]));
  9.         cpu5.push(parseFloat(recv.response[2]));
  10.         cpu15.push(parseFloat(recv.response[3]));
  11.         if(time.length >=10){
  12.             time.shift();
  13.             cpu1.shift();
  14.             cpu5.shift();
  15.             cpu15.shift();
  16.             display(time,cpu1,cpu5,cpu15)
  17.         }
  18.     };

图形更新

  1. $(
  2.         function () {
  3.             fetchData();
  4.             setInterval(fetchData, 1000);
  5.         }
  6.     );
  7.     function fetchData(){
  8.         $.ajax({
  9.             url:"/_ajax/",
  10.             type:"GET",
  11.             dataType: 'json',
  12.             success:function (recv) {
  13.                 update(recv);
  14.             }
  15.         })
  16.     }

view.py

  1. from django.shortcuts import render,HttpResponse
  2. import os,subprocess,time,json
  3.  
  4. def index(request):
  5.     return render(request,"index.html")
  6.  
  7. def ajax(request):
  8.     if request.method == "GET":
  9.         data = []
  10.         data.append(time.strftime("%M:%S", time.localtime()))
  11.         for key in ["system.cpu.util[,,avg1]", "system.cpu.util[,,avg5]", "system.cpu.util[,,avg15]"]:
  12.             cmd = "C:/get.exe -s {} -p {} -k {}".format("192.168.1.20", "10050", key)
  13.             proc = subprocess.Popen(cmd, shell=True, stdout=subprocess.PIPE)
  14.             data.append(float(proc.stdout.readlines()[0].split()[0]))
  15.         return HttpResponse(json.dumps({"response":data}))

urls.py

  1. from django.contrib import admin
  2. from django.urls import path
  3. from MyWeb import views
  4.  
  5. urlpatterns = [
  6.     path('admin/', admin.site.urls),
  7.     path("cpu/",views.index),
  8.     path("_ajax/",views.ajax)
  9. ]

可能效果不是很明显，你可以稍微改一下代码。

  1. def ajax(request):
  2.     if request.method == "GET":
  3.         data = []
  4.         data.append(time.strftime("%M:%S", time.localtime()))
  5.         data.append(random.randint(1,100))
  6.         data.append(random.randint(100, 200))
  7.         data.append(random.randint(23, 90))
  8.         return HttpResponse(json.dumps({"response":data}))
  1. // 负责对参数的解析
  2.     var time =["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""];
  3.     var cpu1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  4.     var cpu5 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  5.     var cpu15 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  6.     var update = function(recv){
  7.         time.push(recv.response[0]);
  8.         cpu1.push(parseFloat(recv.response[1]));
  9.         cpu5.push(parseFloat(recv.response[2]));
  10.         cpu15.push(parseFloat(recv.response[3]));
  11.         if(time.length >=40){
  12.             time.shift();
  13.             cpu1.shift();
  14.             cpu5.shift();
  15.             cpu15.shift();
  16.             display(time,cpu1,cpu5,cpu15)
  17.         }
  18.     };

除了可以监控系统负载外，还可以监控网卡，监控内存等，原理都是一样的，网卡监控代码。

  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3. {% load static %}
  4. {% block content %}
  5. <div id="main" style="width: 100%; height: 400px;"></div>
  6. <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  7. <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
  8. <script type="text/javascript" charset="UTF-8">
  9.     var display = function(){
  10.         var main =echarts.init(document.getElementById("main"));
  11.         var option = {
  12.             // tooltip 鼠标放上去之后会自动出现坐标
  13.             tooltip: {
  14.                 trigger: 'axis',
  15.                 axisPointer: {
  16.                     type: 'cross',
  17.                     label: {
  18.                         backgroundColor: '#6a7985'
  19.                     }
  20.                 }
  21.             },// toolbox = 菜单栏中的各种小功能
  22.             toolbox: {
  23.                 feature: {
  24.                     dataZoom: {
  25.                         yAxisIndex: 'none'
  26.                     },
  27.                     restore: {},
  28.                     saveAsImage: {}
  29.                 }
  30.             },
  31.             legend: {
  32.                 data: [ '网卡入口流量', '网卡出口流量']
  33.             },
  34.             // 负责绘图的配置
  35.             xAxis: {
  36.                 type: 'category',
  37.                 data: [1,2,3,4,5,1,2,3,4,5]
  38.             },
  39.             yAxis: {
  40.                 type: 'value'
  41.             },
  42.             series: [
  43.             {
  44.                 name: "网卡入口流量",
  45.                 stack: "总量",
  46.                 data: [1,2,3,4,5,1,2,3,4,5],
  47.                 type: 'line',
  48.                 areaStyle: {}
  49.             },
  50.             {
  51.                 name: "网卡出口流量",
  52.                 stack: "总量",
  53.                 data: [1,2,3,4,5,1,2,3,4,5],
  54.                 type: 'line',
  55.                 areaStyle: {}
  56.             }
  57.             ]
  58.         };
  59.         main.setOption(option,true);
  60.     };
  61.     display()
  62. </script>
  63. {% endblock %}

网站流量统计(折线图)

通过分析日志统计流量。

  1. import os,sys
  2.  
  3. def log(path):
  4.     key = []
  5.     value = []
  6.     for item in fp.readlines():
  7.         date = item.split()[3]
  8.         HourData = date.split(":")[1] + ":" + date.split(":")[2]
  9.         if item.split()[9] != "-" and item.split()[9] != '"-"':
  10.             SendByte = int(item.split()[9])
  11.     key.append(HourData)
  12.     value.append(SendByte)
  13.     return dict(zip(key,value))
  14.  
  15. fp = open("c://access.log","r")
  16. dic = log(fp)

针对Web服务的流量统计 上面代码只能统计出所有的流量，无法叠加，可以以IP为例进行流量叠加。

  1. import os,sys
  2.  
  3. def Count_IP_And_Flow(file):
  4.     addr = {}  # key 保存当前的IP信息
  5.     flow = {}  # value 保存当前IP流量总和
  6.     Count= 0   # 针对IP地址的计数器
  7.     with open(file) as f:
  8.         contexts = f.readlines()
  9.     for line in contexts:
  10.         if line.split()[9] != "-" and line.split()[9] != '"-"':
  11.             size = line.split()[9]
  12.         ip_attr = line.split()[0]
  13.         Count = int(size) + Count
  14.         if ip_attr in addr.keys():
  15.             addr[ip_attr] = addr[ip_attr] + 1
  16.             flow[ip_attr] = flow[ip_attr] + int(size)
  17.         else:
  18.             addr[ip_attr] = 1
  19.             flow[ip_attr] = int(size)
  20.     return addr,flow
  21.  
  22. if __name__ == "__main__":
  23.     Address,OutFlow = Count_IP_And_Flow("c://access.log")
  24.     print("地址计数:{}  ---> 流量计数:{}".format(Address,OutFlow))

上面的代码，稍微修改一下就能统计时间与流量的关系。

  1. def Count_IP_And_Flow(file):
  2.     addr = {}  # key 保存当前的IP信息
  3.     flow = {}  # value 保存当前IP流量总和
  4.     Count= 0   # 针对IP地址的计数器
  5.     with open(file) as f:
  6.         contexts = f.readlines()
  7.     for line in contexts:
  8.         if line.split()[9] != "-" and line.split()[9] != '"-"':
  9.             size = line.split()[9]
  10.         temp = line.split()[3]
  11.         ip_attr = temp.split(":")[1] + ":" + temp.split(":")[2]
  12.         Count = int(size) + Count
  13.         if ip_attr in addr.keys():
  14.             addr[ip_attr] = addr[ip_attr] + 1
  15.             flow[ip_attr] = flow[ip_attr] + int(size)
  16.         else:
  17.             addr[ip_attr] = 1
  18.             flow[ip_attr] = int(size)
  19.     return addr,flow
  20.  
  21. if __name__ == "__main__":
  22.     Address,OutFlow = Count_IP_And_Flow("c://access.log")
  23.     print("流量计数:{}".format(Address,OutFlow))

接着是绘图，这里直接把代码拿出来吧。

  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3. {% load static %}
  4. {% block content %}
  5. <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css">
  6. <div class="panel panel-primary" style="width: 100%;height: 30%; float: left">
  7.     <div class="panel-heading">
  8.         <h3 class="panel-title">网站流量统计</h3>
  9.     </div>
  10.     <div class="panel-body">
  11.         <div id="main" style="width:100%; height: 400px"></div>
  12.     </div>
  13. </div>
  14. <script src="https://www.blib.cn/cdn/echarts.js" type="text/javascript"></script>
  15. <script src="https://www.blib.cn/cdn/jquery.js" type="text/javascript"></script>
  16. <script type="text/javascript" charset="UTF-8">
  17.         var kv = new Array();
  18.         var keys = new Array();
  19.         var values = new Array();
  20.         kv = {{ data | safe }};
  21.         for(var logkey in kv){
  22.             keys.push(logkey);
  23.             values.push(kv[logkey]);
  24.         }
  25.  
  26.         var display = function() {
  27.             var main = echarts.init(document.getElementById("main"));
  28.             var option = {
  29.                 xAxis: {
  30.                     type: 'category',
  31.                     boundaryGap: false,
  32.                     data: keys
  33.                 },
  34.                 yAxis: {
  35.                     type: 'value'
  36.                 },
  37.                 series: [{
  38.                     data: values,
  39.                     type: 'line',
  40.                     areaStyle: {},
  41.                 }]
  42.             };
  43.             main.setOption(option,true);
  44.         };
  45.     display();
  46. </script>
  47. {% endblock %}
  1. from django.shortcuts import render
  2. import json
  3.  
  4. def Count_IP_And_Flow(file):
  5.     addr = {}  # key 保存当前的IP信息
  6.     flow = {}  # value 保存当前IP流量总和
  7.     Count= 0   # 针对IP地址的计数器
  8.     with open(file) as f:
  9.         contexts = f.readlines()
  10.     for line in contexts:
  11.         if line.split()[9] != "-" and line.split()[9] != '"-"':
  12.             size = line.split()[9]
  13.         temp = line.split()[3]
  14.         ip_attr = temp.split(":")[1] + ":" + temp.split(":")[2]
  15.         Count = int(size) + Count
  16.         if ip_attr in addr.keys():
  17.             flow[ip_attr] = flow[ip_attr] + int(size)
  18.         else:
  19.             addr[ip_attr] = 1
  20.             flow[ip_attr] = int(size)
  21.     return flow
  22.  
  23. def index(request):
  24.     OutFlow = Count_IP_And_Flow("c://access.log")
  25.     print(OutFlow)
  26.     return render(request,"index.html",{"data":json.dumps(OutFlow)})

效果图如下，我这台机器访问量很小，将就着看吧。

统计IP出现的次数。

  1. def IP_Count(file):
  2.     ip = {}
  3.     with open(file) as f:
  4.         for i in f.readlines():
  5.             ip_attr = i.strip().split()[0]
  6.             if ip_attr in ip.keys():
  7.                 ip[ip_attr] = ip[ip_attr] + 1
  8.             else:
  9.                 ip[ip_attr] = 1
  10.     print(ip)
  11.  
  12. IP_Count("c://access.log")

网站状态码统计(饼状图)

饼状图的绘制： 统计目标主机网页状态码，与个数，并绘制饼状图，饼图和其他图不太一样，绘制起来蛮烦一些。

  1. from django.shortcuts import render
  2. import json
  3.  
  4. def Count_Flag_And_Flow(file):
  5.     list = []
  6.     flag = {}
  7.     with open(file) as f:
  8.         contexts = f.readlines()
  9.     for line in contexts:
  10.         it = line.split()[8]
  11.         list.append(it)
  12.     list_num = set(list)
  13.     for item in list_num:
  14.         num = list.count(item)
  15.         flag[item] = num
  16.     return flag
  17.  
  18. def index(request):
  19.     Address = Count_Flag_And_Flow("c://access.log")
  20.     print(Address)
  21.     return render(request,"index.html",{"data":json.dumps(Address)})
  22.  
  23. from MyWeb import views
  24. urlpatterns = [
  25.     path('admin/', admin.site.urls),
  26.     path("log/",views.index)
  27. ]
  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3. {% load static %}
  4.  
  5. {% block content %}
  6. <div id="main" style="width:50%; height: 300px"></div>
  7. <script src="https://www.blib.cn/cdn/echarts.js" type="text/javascript"></script>
  8. <script src="https://www.blib.cn/cdn/jquery.js" type="text/javascript"></script>
  9.     <script type="text/javascript" charset="UTF-8">
  10.         var kv = new Array();
  11.         kv = {{ data | safe }}
  12.         var test = new Array();
  13.         for(var logkey in kv){
  14.             test.push( {value:kv[logkey], name:logkey} )
  15.         }
  16.  
  17.         var display = function(){
  18.             var main = echarts.init(document.getElementById("main"));
  19.             var option = {
  20.                 legend: {
  21.                     orient: 'vertical',
  22.                     left: 'left',
  23.                 },
  24.                 series: [
  25.                     {
  26.                         type: 'pie',
  27.                         radius: '70%',
  28.                         center: ['50%', '50%'],
  29.                         detail: {formatter:'{value}'},
  30.                         data: test
  31.                     }
  32.                 ]
  33.             };
  34.             main.setOption(option,true);
  35.         };
  36.         display();
  37.     </script>
  38. {% endblock %}

加上框架看效果。

  1. <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  2.     <div class="panel panel-primary" style="width: 60%;height: 50%">
  3. 	<div class="panel-heading">
  4. 		<h3 class="panel-title">网站访问状态统计</h3>
  5. 	</div>
  6. 	<div class="panel-body">
  7. 		这是一个基本的面板
  8. 	</div>
  9. </div>

来，搞事

  1. <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css">
  2. <div class="panel panel-primary" style="width: 40%;height: 30%">
  3.     <div class="panel-heading">
  4.         <h3 class="panel-title">网站访问状态统计</h3>
  5.     </div>
  6.     <div class="panel-body">
  7.         <div id="main" style="width:100%; height: 300px"></div>
  8.     </div>
  9. </div>

网站访问设备统计(柱状图)

统计设备的类型，例如Windows linux 等，这里我们接着上面的做吧，先来改布局。

  1. {% block content %}
  2.  
  3. <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css">
  4. <div class="panel panel-primary" style="width: 40%;height: 30%;float: left">
  5.     <div class="panel-heading">
  6.         <h3 class="panel-title">网站访问状态统计</h3>
  7.     </div>
  8.     <div class="panel-body">
  9.         <div id="main" style="width:100%; height: 300px"></div>
  10.     </div>
  11. </div>
  12. <div class="panel panel-primary" style="width: 58%;height: 30%; float: right">
  13.     <div class="panel-heading">
  14.         <h3 class="panel-title">网站设备类型统计</h3>
  15.     </div>
  16.     <div class="panel-body">
  17.         <div id="main1" style="width:100%; height: 300px"></div>
  18.     </div>
  19. </div>

完整代码如下，就是拼接起来就行，没什么技术含量。

  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3. {% load static %}
  4.  
  5. {% block content %}
  6. <link rel="stylesheet" href="https://www.blib.cn/cdn/bootstrap3.css">
  7. <div class="panel panel-primary" style="width: 40%;height: 30%;float: left">
  8.     <div class="panel-heading">
  9.         <h3 class="panel-title">网站访问状态统计</h3>
  10.     </div>
  11.     <div class="panel-body">
  12.         <div id="main" style="width:100%; height: 300px"></div>
  13.     </div>
  14. </div>
  15. <div class="panel panel-primary" style="width: 58%;height: 30%; float: right">
  16.     <div class="panel-heading">
  17.         <h3 class="panel-title">网站设备类型统计</h3>
  18.     </div>
  19.     <div class="panel-body">
  20.         <div id="main1" style="width:100%; height: 300px"></div>
  21.     </div>
  22. </div>
  23.  
  24. <script src="https://www.blib.cn/cdn/echarts.js" type="text/javascript"></script>
  25. <script src="https://www.blib.cn/cdn/jquery.js" type="text/javascript"></script>
  26.     <script type="text/javascript" charset="UTF-8">
  27.         var kv = new Array();
  28.         kv = {{ data | safe }}
  29.         var test = new Array();
  30.         for(var logkey in kv){
  31.             test.push( {value:kv[logkey], name:logkey} )
  32.         }
  33.         var display = function(){
  34.             var main = echarts.init(document.getElementById("main"));
  35.             var option = {
  36.                 legend: {
  37.                     orient: 'vertical',
  38.                     left: 'left',
  39.                 },
  40.                 series: [
  41.                     {
  42.                         type: 'pie',
  43.                         radius: '70%',
  44.                         center: ['50%', '50%'],
  45.                         detail: {formatter:'{value}'},
  46.                         data: test
  47.                     }
  48.                 ]
  49.             };
  50.             main.setOption(option,true);
  51.         };
  52.         display();
  53.     </script>
  54.  
  55. <script type="text/javascript" charset="UTF-8">
  56.         var display = function() {
  57.             var main1 = echarts.init(document.getElementById("main1"));
  58.             var option = {
  59.                 xAxis: {
  60.                     type: 'category',
  61.                     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  62.                 },
  63.                 yAxis: {
  64.                     type: 'value'
  65.                 },
  66.                 series: [{
  67.                     data: [120, 200, 150, 80, 70, 110, 130],
  68.                     type: 'bar'
  69.                 }]
  70.             };
  71.             main1.setOption(option,true);
  72.         };
  73. display();
  74. </script>
  75. {% endblock %}

  1. import os,sys
  2.  
  3. def Count_Flag_And_Type(file):
  4.     list = []
  5.     flag = {}
  6.     with open(file) as f:
  7.         contexts = f.readlines()
  8.     for line in contexts:
  9.         list.append( line.split()[12].replace("(",""))
  10.     list_num = set(list)
  11.     for item in list_num:
  12.         num = list.count(item)
  13.         flag[item] = num
  14.     return flag
  15.  
  16. if __name__ == "__main__":
  17.     a = Count_Flag_And_Type("c://access.log")
  18.     print(a)

最终代码如下,前端第二个拼接位置需要注意。

  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3. {% load static %}
  4.  
  5. {% block content %}
  6.  
  7. <link rel="stylesheet" href="https://cdn.lyshark.com/cdn/bootstrap3.css">
  8. <div class="panel panel-primary" style="width: 40%;height: 30%;float: left">
  9.     <div class="panel-heading">
  10.         <h3 class="panel-title">网站访问状态统计</h3>
  11.     </div>
  12.     <div class="panel-body">
  13.         <div id="main" style="width:100%; height: 300px"></div>
  14.     </div>
  15. </div>
  16. <div class="panel panel-primary" style="width: 58%;height: 30%; float: right">
  17.     <div class="panel-heading">
  18.         <h3 class="panel-title">网站设备类型统计</h3>
  19.     </div>
  20.     <div class="panel-body">
  21.         <div id="main1" style="width:100%; height: 300px"></div>
  22.     </div>
  23. </div>
  24.  
  25. <script src="https://cdn.lyshark.com/cdn/echarts.js" type="text/javascript"></script>
  26. <script src="https://cdn.lyshark.com/cdn/jquery.js" type="text/javascript"></script>
  27.     <script type="text/javascript" charset="UTF-8">
  28.         var kv = new Array();
  29.         kv = {{ data | safe }}
  30.         var test = new Array();
  31.         for(var logkey in kv){
  32.             test.push( {value:kv[logkey], name:logkey} )
  33.         }
  34.         var display = function(){
  35.             var main = echarts.init(document.getElementById("main"));
  36.             var option = {
  37.                 legend: {
  38.                     orient: 'vertical',
  39.                     left: 'left',
  40.                 },
  41.                 series: [
  42.                     {
  43.                         type: 'pie',
  44.                         radius: '70%',
  45.                         center: ['50%', '50%'],
  46.                         detail: {formatter:'{value}'},
  47.                         data: test
  48.                     }
  49.                 ]
  50.             };
  51.             main.setOption(option,true);
  52.         };
  53.         display();
  54.     </script>
  55.  
  56. <script type="text/javascript" charset="UTF-8">
  57.         var kv = new Array();
  58.         kv = {{ data1 | safe }}
  59.         var keys = new Array();
  60.         var values = new Array();
  61.         for(var logkey in kv){
  62.             keys.push(logkey);
  63.             values.push(kv[logkey]);
  64.         }
  65.         console.log(keys,values);
  66.  
  67.         var display = function() {
  68.             var main1 = echarts.init(document.getElementById("main1"));
  69.             var option = {
  70.                 xAxis: {
  71.                     type: 'category',
  72.                     data: keys
  73.                 },
  74.                 yAxis: {
  75.                     type: 'value'
  76.                 },
  77.                 series: [{
  78.                     data: values,
  79.                     type: 'bar'
  80.                 }]
  81.             };
  82.             main1.setOption(option,true);
  83.         };
  84. display();
  85. </script>
  86. {% endblock %}

后端处理日志并返回结果。

  1. from django.shortcuts import render
  2. import json
  3.  
  4. def Count_Flag_And_Flow(file):
  5.     list = []
  6.     flag = {}
  7.     with open(file) as f:
  8.         contexts = f.readlines()
  9.     for line in contexts:
  10.         it = line.split()[8]
  11.         list.append(it)
  12.     list_num = set(list)
  13.     for item in list_num:
  14.         num = list.count(item)
  15.         flag[item] = num
  16.     return flag
  17.  
  18. def Count_Flag_And_Type(file):
  19.     list = []
  20.     flag = {}
  21.     with open(file) as f:
  22.         contexts = f.readlines()
  23.     for line in contexts:
  24.         list.append( line.split()[12].replace("(",""))
  25.     list_num = set(list)
  26.     for item in list_num:
  27.         num = list.count(item)
  28.         flag[item] = num
  29.     return flag
  30.  
  31. def index(request):
  32.     Address = Count_Flag_And_Flow("c://access.log")
  33.     print(Address)
  34.     Types = Count_Flag_And_Type("c://access.log")
  35.     print(Types)
  36.     return render(request,"index.html",{"data":json.dumps(Address),"data1":json.dumps(Types)})
  37.  
  38. def mob(request):
  39.     return render(request,"mob.html")

经过测试上面的代码有一定的局限性，比如下面的这两条代码，会出现异常。

::1 - - [15/Jan/2020:04:43:40 -0500] "OPTIONS * "
192.168.1.2 - - [15/Jan/2020:04:37:09 -0500] "-" 408 - "-" "-"

日志统计时，应该避免出现这种无效行，该怎么做，我就不说了，正则！！

单位时间访客(访客位置)

先来几个API查询地址。

http://ip.ws.126.net/ipquery?ip=192.168.1.100

  1. import os,sys
  2. import urllib.request
  3.  
  4. def counts(file):
  5.     Addr = []
  6.     with open(file) as f:
  7.         contexts = f.readlines()
  8.     for line in contexts:
  9.         lt = line.split()[0]
  10.         if lt !="::1" and lt !="127.0.0.1":
  11.             Addr.append(lt)
  12.     return set(Addr)
  13.  
  14. if __name__ == "__main__":
  15.     ret = counts("C://access.log")
  16.     for item in ret:
  17.         url = "http://ip.ws.126.net/ipquery?ip={}".format(item)
  18.         ret = urllib.request.urlopen(url)
  19.         print(ret.read().decode('gbk'))

  1. if __name__ == "__main__":
  2.     ret = counts("C://access.log")
  3.     for item in ret:
  4.         url = "http://ip.ws.126.net/ipquery?ip={}".format(item)
  5.         ret = urllib.request.urlopen(url).read().decode('gbk')
  6.         City = ret.split()[5].replace('province:"', '').replace('"}', "")
  7.         print("IP:{} -----> 城市:{}".format(item,City))

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/164999
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号