菜单 搜索
首页 前端知识 Django web 开发(四) - Django项目实践(十)-数据统计

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

2024-03-06 09:03:27 前端知识 前端哥 502 418 我要收藏

数据统计

  • 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)

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/3339.html
标签
django
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

这是基于HTML CSS JQ做的一款炫酷的旋转时钟网页代码

2024-03-29 15:03:11

javascript/jquery高度宽度详情解说分析

2024-03-29 15:03:11

JQuery 操作Class滚动轮播展示效果

2024-03-29 15:03:10

jQuery语法知识（DOM操作之CSS属性）

2024-03-29 15:03:53

jQuery学习笔记之jQuery常用方法，2024BAT大厂前端社招面试题

2024-03-29 15:03:43

模仿jQuery的slideDown、slideUp上下滑动，舒服，层层深入

2024-03-29 15:03:36

JQuery简介与解析

2024-03-01 12:03:31

评价页面jQuery的用vue改写，web端开发

2024-03-29 15:03:24

使用 Apache ECharts 可视化 Neo4j 图数据

2024-03-29 15:03:14

在Vue 3项目中使用 echarts

2024-03-29 15:03:05

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！