Django web 开发(四) - Django项目实践(十)-数据统计

最新推荐文章于 2024-05-03 17:58:21 发布
最新推荐文章于 2024-05-03 17:58:21 发布
阅读量2.4k 收藏 23
点赞数 6
分类专栏： Django 文章标签： 前端 django echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43139145/article/details/128732280
版权

数据统计

  • echarts 国内

获取方式: https://registry.npmjs.org/echarts/-/echarts-5.4.1.tgz
下载完成后
在这里插入图片描述
将此文件放到项目静态文件目录下
在这里插入图片描述
接下来,上手做

柱状图

编辑myproject/employee_management/templates/layout.html

<li><a href="/chart/list/">数据统计</a></li>

编辑myproject/myproject/urls.py

from employee_management.views import depart,user,pretty,admin, account, task, order, chart

# 数据统计
    path('chart/list/', chart.chart_list),

新建myproject/employee_management/views/chart.py

from django.shortcuts import render, HttpResponse


def chart_list(request):
    """ 数据统计 """
    return render(request, 'chart_list.html')

新建myproject/employee_management/templates/chart_list.html

{% extends 'layout.html'%}

{% block css %}

{% endblock %}


{% block content %}
<div class="container">
    <h1>数据统计</h1>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">折线图</h3>
        </div>
        <div class="panel-body">
            
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">柱状图</h3>
                </div>
                <div class="panel-body">
                    <div id="m2" style="width: 600px;height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">饼图</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block script %}
<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('m2'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量', '价格']
        },
        xAxis: {
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            },
            {
                name: '价格',
                type: 'bar',
                data: [25, 40, 80, 65, 70, 50]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
{% endblock %}

浏览器访问
在这里插入图片描述

调整一下文字和标题的位置

编辑myproject/employee_management/templates/chart_list.html

textAlign: "auto",
   left: "center",

在这里插入图片描述

legend: {
    data: ['销量', '价格'],
    bottom: 0,
},

在这里插入图片描述

模拟从后台获取数据

编辑myproject/myproject/urls.py

path('chart/bar/', chart.chart_bar),

编辑myproject/employee_management/views/chart.py,新增chart_bar函数

import json
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse


def chart_list(request):
    """ 数据统计 """
    return render(request, 'chart_list.html')


def chart_bar(request):
    """ 构造柱状图的数据 """

    # 数据可以去数据库中获取
    legend = ['销量', '价格']
    xAxis = ['1月', '2月', '3月', '4月', '5月', '6月']
    series_list = [
                {
                    "name": '销量',
                    "type": 'bar',
                    "data": [5, 20, 36, 10, 10, 20]
                },
                {
                    "name": '价格',
                    "type": 'bar',
                    "data": [25, 40, 80, 65, 70, 50]
                }
            ]

    result = {
        "status": True,
        "data": {
            "legend": legend,
            "xAxis": xAxis,
            "series_list": series_list,
        }
    }

    return JsonResponse(result)

编辑myproject/employee_management/templates/chart_list.html

<script type="text/javascript">

    $(function () {
        initBar();
    })

    function initBar() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m2'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '员工业绩年度汇总信息',
                subtext: "xxx公司",
                textAlign: "auto",
                left: "center",
            },
            tooltip: {},
            legend: {
                data: [],   // 后台获取
                bottom: 0,
            },
            xAxis: {
                data: []    // 后台获取
            },
            yAxis: {},
            series: []      // 后台获取
        };

        $.ajax({
            url: "/chart/bar/",
            type: "get",
            dataType: "JSON",
            success: function(res){
                if(res.status){
                    // 将获取到的数据更新到 option 中
                    option.legend.data = res.data.legend;
                    option.xAxis.data = res.data.xAxis;
                    option.series = res.data.series_list;

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        })
    }
</script>

在这里插入图片描述

饼图

经过上面柱状图的测试,饼图就非常简单了

打开网址: https://echarts.apache.org/examples/zh/index.html#chart-type-pie
在这里插入图片描述
在这里插入图片描述
编辑myproject/employee_management/templates/chart_list.html,在复制代码的基础上进行修改

<script type="text/javascript">

    $(function () {
        initBar();
        iniPie();
    })
	
	// 柱状图
    function initBar() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('m2'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '员工业绩年度汇总信息',
                subtext: "xxx公司",
                textAlign: "auto",
                left: "center",
            },
            tooltip: {},
            legend: {
                data: [],   // 后台获取
                bottom: 0,
            },
            xAxis: {
                data: []    // 后台获取
            },
            yAxis: {},
            series: []      // 后台获取
        };

        $.ajax({
            url: "/chart/bar/",
            type: "get",
            dataType: "JSON",
            success: function (res) {
                if (res.status) {
                    // 将获取到的数据更新到 option 中
                    option.legend.data = res.data.legend;
                    option.xAxis.data = res.data.xAxis;
                    option.series = res.data.series_list;

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
            }
        })

    }

	// 饼图
    function iniPie() {
        var chartDom = document.getElementById('m3');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '部门预算占比',
                subtext: 'xxx公司',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                bottom: 0,
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: '销售部' },
                        { value: 735, name: '运营部' },
                        { value: 580, name: '财务部' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    }
</script>

浏览器测试
在这里插入图片描述

接下来实现模拟获取后台数据,依然是上面的套路

编辑myproject/myproject/urls.py

path('chart/pie/', chart.chart_pie),

编辑myproject/employee_management/views/chart.py

def chart_pie(request):
    """ 构造饼图的数据 """
    data_list = [
                    { "value": 1048, "name": '销售部' },
                    { "value": 735, "name": '运营部' },
                    { "value": 580, "name": '财务部' },
                ]

    result = {
        "status": True,
        "data_list": data_list,
    }

    return JsonResponse(result)

编辑myproject/employee_management/templates/chart_list.html

<div id="m3" style="width: 300px; height:400px;"></div>

在这里插入图片描述

function iniPie() {
    var chartDom = document.getElementById('m3');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '部门预算占比',
            subtext: 'xxx公司',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            bottom: 0,
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    $.ajax({
        url: "/chart/pie/",
        type: "get",
        dataType: "JSON",
        success: function(res) {
            if(res.status){
                option.series[0].data = res.data_list;
                option && myChart.setOption(option);
            }
        }
    })
}

特别说明:

  • 老版本的 echart 不会对 option 变量在局部声明,而是直接声明为全局变量,我是用的 echart 版本为5.4,已经提前帮我声明好了(不加 var 表示全局变量)

在这里插入图片描述
浏览器测试
在这里插入图片描述

折线图

编辑myproject/employee_management/templates/chart_list.html

<div id="m1" style="width: 100%; height:300px;"></div>

在这里插入图片描述
增加initLine函数

$(function () {
    initBar();
    iniPie();
    initLine();
})

function initLine() {
    var chartDom = document.getElementById('m1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '分公司业绩图',
            left: "center",
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['天津分公司', '北京分公司'],
            bottom: 0,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        toolbox: {
            feature: {
                // saveAsImage: {}
                saveAsImage: false,
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '天津分公司',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '北京分公司',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
        ]
    };

    option && myChart.setOption(option);
}

浏览器访问
在这里插入图片描述

实现获取后台数据

编辑myproject/employee_management/templates/chart_list.html

function initLine() {
    var chartDom = document.getElementById('m1');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '分公司业绩图',
            left: "center",
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: [],
            bottom: 0,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        toolbox: {
            feature: {
                // saveAsImage: {}
                saveAsImage: false,
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: []
    };

    $.ajax({
        url: "/chart/line/",
        type: "get",
        dataType: "JSON",
        success: function(res) {
            if(res.status){
                option.legend.data = res.data.legend_list;
                option.xAxis.data = res.data.xAxis_list;
                option.series = res.data.series_list;

                option && myChart.setOption(option);
            }
        }
    })
}

编辑myproject/myproject/urls.py

path('chart/line/', chart.chart_line),

编辑myproject/employee_management/views/chart.py

def chart_line(request):
    """ 构造折线图的数据 """
    legend_list = ['天津分公司', '北京分公司']
    xAxis_list = ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    series_list = [
                {
                    "name": '天津分公司',
                    "type": 'line',
                    "stack": 'Total',
                    "data": [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    "name": '北京分公司',
                    "type": 'line',
                    "stack": 'Total',
                    "data": [220, 182, 191, 234, 290, 330, 310]
                },
            ]

    result = {
        "status": True,
        "data": {
            "legend_list": legend_list,
            "xAxis_list": xAxis_list,
            "series_list": series_list,
        }
    }
    return JsonResponse(result)

浏览器测试
在这里插入图片描述

ShangCode
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Django Web开发中django-debug-toolbar的配置以及使用
01-20
前言 django，web开发中，用django-debug-toolbar来调试请求的接口，无疑是完美至极。 可能本人，见识博浅，才说完美至极， 大神，表喷，抱拳了。 django_debug_toolbar 是django的第三方工具包，给django扩展了调试功能。 包括查看执行的sql语句，db查询次数，request，headers，调试概览等。 django-debug-toolbar的配置方法如下 第一步： 　　pip install django-debug-toolbar 安装完成之后。就改往下继续配置了。 第二步： 　　打开项目，找到settings.py 文件
Django 开发调试工具 Django-debug-toolbar使用详解
09-19
主要介绍了Django 开发调试工具 Django-debug-toolbar使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
web-development:Django Web开发项目的常规存储库
05-03
网络开发项目 这是我的Web开发项目的存储库。 Django的Web博客应用程序 该项目的想法来自我的CS50x最终项目。 具有博客功能和交互式缩略图系统的个人网站。 见截图 personal_site项目的一些值得注意的功能： 三个模型：发布，评论和类别 中的几个表单，供用户在Web界面中留下评论，发表文章以及选择类别（为了使它们更具吸引力，我使用了扩展名， 并使用了更好的文本编辑器，而我使用了 ） 中负责将后端与前端连接的一堆视图。 他们基本上将字典输入模板，然后在模板中解析数据。 请注意，其中一些是Django通用视图，其他只是基于函数的视图 所有视图的URL在。 每个视图都有一个URL映射，包括站点地图 帖子的站点地图（django.contrib.sitemaps） 应用程序主要用于提供静态信息，例如索引页，简历和联系人。
django-starter-template：遵循最佳实践的Django 2.0项目模板
02-04
django-starter-template 遵循最佳实践的Django 2.0易于使用的项目模板。 产品特点 可压缩JS和CSS并编译LESS / SASS文件。 管理依赖项和。 为超级用户启用了。 对密码进行哈希处理 快速开始 确保已 。 然后在您的virtualenv中安装Django 2.0： pip install django==2.0 创建一个新的Django项目（确保更改project_name ） django-admin.py startproject --template=https://github.com/fasouto/django-starter-t
django-使用python+django开发的博客应用-项目实战.zip
01-27
django django_使用python+django开发的博客应用_项目实战
使用django的ORM框架按月统计近一年内的数据方法
09-19
今天小编就为大家分享一篇使用django的ORM框架按月统计近一年内的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Django统计总数、最新纪录和空值判断等功能
qq_41146932的博客
07-27 374
本篇笔记将介绍一些 Django 查询中统计总数、最新纪录和空值判断等功能。
django统计
bx409027377的专栏
03-28 2600
1.生成整个查询数据集统计 Book.object.all().aggregate(Avg('price')) aggregate()是一个查询集的末端字句。调用后会返回一个由名称和值组成的字典 如果需要手动指定统计名称，则 Book.object.all().aggergate(average_price=Avg('price')) 生成查询集中每一个项目的统计： Booki
django官方文档——统计查询
热门推荐
Hello World!
08-31 1万+
统计Django 数据库抽象 API 描述了如何创建、检索、更新和删除独立的对象。但是，有时你会需要处理一些有关对象的集合的统计。本文描述如何使用 Django 查询来处理统计。 本文我们将使用以下模型。这些模型用于在线书店图书清单： class Author(models.Model): name = models.CharField(max_length=100)
django 统计
choufengyin7439的博客
12-18 183
统计Django 数据库抽象 API描述了如何创建、检索、更新和删除独立的对象。但是，有时你会需要处理一些有关对象的集合的统计。本文描述如何使用 Django 查询来处理统计。 本文我们将使用以下模型。这些模型用于在线书店图书清单： class Autho...
高效易用Django流程引擎源码 - django-lb-workflow
03-25
项目概述：django-lb-workflow 是一个基于Python的高效易用Django流程引擎源码，旨在轻松集成至现有系统。该项目主要由68个Python文件、30个HTML文件以及其他相关文件构成，共计136个文件。其中还包括了HTML模板、...
Django-微型Web项目开发与部署-体温登记系统
06-14
Django-微型Web项目开发与部署-体温登记系统
基于Django的Python Web开发项目设计源码
04-16
本源码项目是基于Django的Python Web开发项目设计，包含97个文件，主要...通过该项目，开发者可以学习并实践Django框架的基本用法，为后续的Web开发奠定基础。系统界面友好，易于操作，适合用于各类Web应用开发场景。
element-ui的bug记录
nick_zhang的博客
04-29 386
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1073
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 272
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 262
createWs("测试数据", (res) => {
菜鸡学习netty源码（三）—— Reactor 模型
最新发布
u013127325的博客
05-03 327
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
Element-UI库：Web前端开发的强大助力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-03 723
定义与背景Element-UI是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端UI组件库。它遵循Material Design设计规范，提供了一套丰富的组件和工具，帮助开发者快速构建美观、功能强大的Web应用。Element-UI由饿了么前端团队开发和维护，已经成为国内前端开发者广泛使用的UI库之一。特点与优势（1）丰富的组件库：Element-UI提供了包括按钮、表单、布局、导航、通知等在内的多种常用组件，满足了大部分Web应用的开发需求。
django 京东爬虫 毕业设计
01-02
Django京东爬虫是一个非常有意思和实用的毕业设计项目。Django是一种流行的Python Web框架，可用于开发高效、灵活的Web应用程序。而京东爬虫是指通过网络爬取京东商城的数据进行分析和利用。这个毕业设计项目结合了Python编程、Web开发和数据分析等多个领域的知识和技能。 实现这个项目的关键在于利用Django框架搭建一个网站，实现京东商品的搜索和展示功能。首先，需要通过爬虫技术爬取京东网站上的商品数据，可以使用Python的Requests库和BeautifulSoup库来实现页面的请求和解析。然后，将获取到的数据保存到数据库中，可以使用Django的ORM框架来实现数据的存储和管理。 在网站的前端界面上，可以使用Django的模板语言来渲染数据并展示给用户。可以实现一个搜索框，用户可以输入关键字进行商品搜索，然后将搜索结果展示给用户。另外，可以实现分页功能，让用户可以浏览多页的搜索结果。 此外，还可以添加一些其他的功能，比如用户注册、登录、评论等。可以使用Django的用户认证系统来实现用户的注册和登录功能。用户可以登录后，可以在商品详情页对商品进行评论和评分。 在数据分析方面，可以使用Python的数据分析库，例如Pandas、NumPy和Matplotlib等，对采集到的京东商品数据进行统计和可视化分析。可以分析京东网站上各类商品的销量、价格趋势等信息，为用户提供一些有用的数据洞察。 总的来说，Django京东爬虫毕业设计项目可以锻炼学生的Python编程能力、Web开发能力以及数据分析能力。同时，还可以增加对网络爬虫和数据挖掘等领域的了解和实践经验。这个项目具有一定的挑战性和实用性，对毕业设计来说是一个很好的选择。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值