Django 实现统计网站访问状态

Django和ECharts是两个独立的工具，分别用于构建Web应用程序和创建交互式图表。Django是一个基于Python的Web框架，而ECharts是一个由百度开发的用于构建数据可视化图表的JavaScript库。您可以结合使用它们，以在Django应用程序中展示ECharts图表。

网站访问状态统计(饼状图)

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

前台index.html代码如下.

<script src="https://www.bootcdn.cn/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.bootcdn.cn/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://www.bootcdn.cn/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://www.bootcdn.cn/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.bootcdn.cn/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://www.bootcdn.cn/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://www.bootcdn.cn/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.bootcdn.cn/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://www.bootcdn.cn/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://www.bootcdn.cn/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.bootcdn.cn/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://www.bootcdn.cn/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>