Django 实现统计网站访问状态

网站访问状态统计(饼状图): 统计Web容器的日志数据,并通过饼状图将访问状态统计出来,例如404状态.

前台​​index.html​​代码如下.

<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.lyshark.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>

<div class="panel panel-primary" style="width: 40%;height: 30%; float: left">
<div class="panel-heading">
<h3 class="panel-title">网站访问状态统计</h3>
</div>
<div class="panel-body">
<div id="main" style="width:100%; height: 300px"></div>
</div>
</div>

<script type="text/javascript" charset="UTF-8">
var kv = new Array();
kv = {{ data | safe }}
var test = new Array();
for(var logkey in kv){
test.push( {value:kv[logkey], name:logkey} )
}
var display = function(){
var main = echarts.init(document.getElementById("main"));
var option = {
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
type: 'pie',
radius: '70%',
center: ['50%', '50%'],
detail: {formatter:'{value}'},
data: test
}
]
};
main.setOption(option,true);
};
display();
</script>

后端​​views.py​​​代码如下,路由曾则只保留一个​​index​​映射即可.

from django.shortcuts import render
import json

def index(request):
Address = {'226': 4, '404': 12, '200': 159, '400': 25, '"-"': 117, '302': 1625}
return render(request,"index.html",{"data":json.dumps(Address)})

统计Web容器设备型号(柱状图): 统计访问了本站的所有设备型号信息,并使用柱状图展示.

前端​​index.html​​

<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.lyshark.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>

<div class="panel panel-primary" style="width: 58%;height: 30%; float: right">
<div class="panel-heading">
<h3 class="panel-title">网站设备类型统计</h3>
</div>
<div class="panel-body">
<div id="main1" style="width:100%; height: 300px"></div>
</div>
</div>

<script type="text/javascript" charset="UTF-8">
var kv = new Array();
var keys = new Array();
var values = new Array();
kv = {{ data | safe }}

for(var logkey in kv){
keys.push(logkey);
values.push(kv[logkey]);
}
var display = function() {
var main1 = echarts.init(document.getElementById("main1"));
var option = {
xAxis: {
type: 'category',
data: keys
},
yAxis: {
type: 'value'
},
series: [{
data: values,
type: 'bar'
}]
};
main1.setOption(option,true);
};
display();
</script>

后端​​views.py​​代码

from django.shortcuts import render
import json

def index(request):
Types = {'Linux;': 1, 'studies': 1, 'Windows': 1, 'compatible;': 1, 'web': 1, 'X11;': 1}
return render(request,"index.html",{"data":json.dumps(Types)})

统计时间段内访问流量(折线图): 统计指定的时间段内的访问流量数据,例如12:00-->10256kb等.

<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.lyshark.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>

<div class="panel panel-primary" style="width: 100%;height: 30%; float: left">
<div class="panel-heading">
<h3 class="panel-title">网站流量统计</h3>
</div>
<div class="panel-body">
<div id="main" style="width:100%; height: 400px"></div>
</div>
</div>

<script type="text/javascript" charset="UTF-8">
var kv = new Array();
var keys = new Array();
var values = new Array();
kv = {{ data | safe }};
for(var logkey in kv){
keys.push(logkey);
values.push(kv[logkey]);
}

var display = function() {
var main = echarts.init(document.getElementById("main"));
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: keys
},
yAxis: {
type: 'value'
},
series: [{
data: values,
type: 'line',
areaStyle: {},
}]
};
main.setOption(option,true);
};
display();
</script>

后端代码​​views.py​​如下.

from django.shortcuts import render
import json

def index(request):
OutFlow = {'03:30': 207, '03:48': 207, '04:15': 207, '04:28': 207, '04:42': 207, '04:51': 207}
return render(request,"index.html",{"data":json.dumps(OutFlow)})

实现图形合并: 将两个图形,依次排列在左右两端的布局代码.

<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.lyshark.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>

<div class="panel panel-primary" style="width: 40%;height: 30%;float: left">
<div class="panel-heading">
<h3 class="panel-title">网站访问状态统计</h3>
</div>
<div class="panel-body">
<div id="main" style="width:100%; height: 300px"></div>
</div>
</div>
<div class="panel panel-primary" style="width: 58%;height: 30%; float: right">
<div class="panel-heading">
<h3 class="panel-title">网站设备类型统计</h3>
</div>
<div class="panel-body">
<div id="main1" style="width:100%; height: 300px"></div>
</div>
</div>

<script type="text/javascript" charset="UTF-8">
var display = function(){
var main = echarts.init(document.getElementById("main"));
var option = {
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
type: 'pie',
radius: '70%',
center: ['50%', '50%'],
detail: {formatter:'{value}'},
data: [100,200,200,300,200,100]
}
]
};
main.setOption(option,true);
};
display();
</script>

<script type="text/javascript" charset="UTF-8">
var display = function() {
var main1 = echarts.init(document.getElementById("main1"));
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
main1.setOption(option,true);
};
display();
</script>

版权声明：本博客文章与代码均为学习时整理的笔记，文章 [均为原创] 作品，转载请 [添加出处] ，您添加出处是我创作的动力！