当前位置： 首页 > news >正文

【Django】开发日报_13_Day：手机号码管理系统（11）

news 来源：原创 2024/4/30 0:00:02

目录

          • 0、数据统计-搭建初始界面
          • 1、数据统计-导入Echarts并使用-柱状图
          • 2、数据统计-使用Ajax请求后台数据-柱状图
          • 3、数据统计-饼状图
          • 4、数据统计-折线图
          • 5、HighCharts示例

0、数据统计-搭建初始界面

template->urls->views->html
templates.html
在这里插入图片描述
urls.py

from app01.views import depart, user, pretty, admin, account, task, order, chart
   # ------------------数据统计---------------------------------------------------
    path('chart/list/', chart.chart_list),

chart,py

在这里插入图片描述
chart_list.html
在这里插入图片描述

1、数据统计-导入Echarts并使用-柱状图

Echarts官网
下载Echarts
https://echarts.apache.org/handbook/zh/get-started/
在这里插入图片描述
在这里插入图片描述

ctrl+s保存
在这里插入图片描述
将其拷贝到项目的js文件中去
在这里插入图片描述
在页面中导入
在这里插入图片描述
导入方法
找到图表位置定义标签和id
在这里插入图片描述
下面画图时导入位置id
在这里插入图片描述
即可
在这里插入图片描述
通过修改js里的数据可以直接修改图表
在这里插入图片描述

在这里插入图片描述
修改大小

在这里插入图片描述
修改小标的位置
在这里插入图片描述
在这里插入图片描述
修改标题位置
在这里插入图片描述
在这里插入图片描述

更多Echarts配置说明请参考配置项手册

2、数据统计-使用Ajax请求后台数据-柱状图

urls.py

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

chart.py

from django.shortcuts import render
from django.http import JsonResponse

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


def chart_bar(request):
    """构造柱状图"""
    # 数据可以从数据库中获取
    legend = ['大白', '小黑']
    series_list = [
        {
            "name": '大白',
            "type": 'bar',
            "data": [5, 20, 36, 10, 10, 20]
        },
        {
            "name": '小黑',
            "type": 'bar',
            "data": [3, 10, 16, 20, 15, 90]
        }
    ]
    x_axis = ['1月', '2月', '3月', '4月', '5月', '6月']

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

    return JsonResponse(result)

chart_list.html

{% extends 'template.html' %}
{% load static %}

{% block content %}
    <div class="container">
        数据统计
        <!--面板1-->
        <div class="panel panel-default">
            <div class="panel-heading">折线图</div>
            <div class="panel-body">
                折线图
            </div>
        </div>

        <div class="row">
            <div class="col-sm-8">
                <!--面板2-->
                <div class="panel panel-default">
                    <div class="panel-heading">柱状图</div>
                    <div class="panel-body">
                        <div id="m2" style="width: 100%;height: 400px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <!--面板3-->
                <div class="panel panel-default">
                    <div class="panel-heading">饼图</div>
                    <div class="panel-body">
                        饼图
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'js/echarts.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            initBar();
        })

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

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '上半年业绩图',
                    textAlign: "auto",
                    left: "center",
                },
                tooltip: {},
                legend: {
                    data: [],//后台获取
                    bottom: 0,
                },
                xAxis: {
                    data: []//后台获取
                },
                yAxis: {},
                series: []//后台获取
            };

            //使用Ajax向后台获取请求
            $.ajax({
                url: "/chart/bar/",
                type: "get",
                dataType: "JSON",
                success: function (res) {
                    //将后台返回的数据更新到option中（legend，xAxis，series）
                    if (res.status) {
                        //将后台数据更新到option中
                        option.legend.data = res.data.legend;
                        option.xAxis.data = res.data.x_axis;
                        option.series = res.data.series_list;
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    } else {

                    }

                }
            })
        }

    </script>
{% endblock %}

访问页面
在这里插入图片描述

3、数据统计-饼状图

定义图表位置与id
在这里插入图片描述
js函数部分

/**
         * 初始化饼状图
         */
        function initPie() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('m3'));
            var option = {//必须定义成局部变量不然按全局变量处理
                title: {
                    text: '部门预算占比',
                    subtext: '代码骑士未来游戏公司',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    //orient: 'vertical',
                    //left: 'left',
                    bottom: 0
                },
                series: [
                    {
                        name: '预算',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [],
                    }
                ]
            };
            //使用Ajax向后台获取请求
            $.ajax({
                url: "/chart/pie/",
                type: "get",
                dataType: "JSON",
                success: function (res) {
                    //将后台返回的数据更新到option中（legend，xAxis，series）
                    if (res.status) {
                        //将后台数据更新到option中
                        option.series[0].data = res.data
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    } else {

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

后台
urls.py

    # ------------------数据统计---------------------------------------------------
    path('chart/list/', chart.chart_list),
    path('chart/bar/', chart.chart_bar),
    path('chart/pie/', chart.chart_pie),

chart.py

def chart_pie(request):
    """构造饼状图"""
    db_data_list = [
        {"value": 1048, "name": '技术部'},
        {"value": 735, "name": '运营部'},
        {"value": 580, "name": '新媒体'},
    ]

    result = {
        "status":True,
        "data":db_data_list,
    }
    return JsonResponse(result)

前端页面
在这里插入图片描述

4、数据统计-折线图

前端
chart_list.html

/**
         * 初始化折线图
         */
        function initLine() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('m1'));

            var option = {
                title: {
                    text: '分公司业绩图',
                    left: "center",
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [],//后台
                    bottom: 0
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                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.legend;
                        option.xAxis.data = res.x_axis;
                        option.series = res.series_list;
                        myChart.setOption(option);
                    } else {

                    }
                }
            })
        }

后端
urls.py

    # ------------------数据统计---------------------------------------------------
    path('chart/list/', chart.chart_list),
    path('chart/bar/', chart.chart_bar),
    path('chart/pie/', chart.chart_pie),
    path('chart/line/', chart.chart_line),

chart.py


def chart_line(request):
    """构造折线图1"""
    legend = ['上海', '北京']
    x_axis = ['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,
        "legend":legend,
        "x_axis": x_axis,
        "series_list": series_list,
    }
    return JsonResponse(result)

访问网页
在这里插入图片描述

5、HighCharts示例

与Echarts功能相似，但有部分功能不同。
highcharts官网
在这里插入图片描述
下载
这里直接使用CDN

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

urls,py

    path('chart/highcharts/', chart.highcharts),

chart.py

def highcharts(request):
    """highcharts示例"""
    return render(request,'highcharts.html')

highcharts.html

{% extends 'template.html' %}
{% load static %}

{% block content %}
    <div class="container">
        <div id="m1" style="width: 600px;height:400px;"></div>
    </div>
{% endblock %}

{% block js %}
    <div class="container">
        <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script>
            // 图表配置
            var options = {
                chart: {
                    type: 'bar'                          //指定图表的类型，默认是折线图（line）
                },
                title: {
                    text: '我的第一个图表'                 // 标题
                },
                xAxis: {
                    categories: ['苹果', '香蕉', '橙子']   // x 轴分类
                },
                yAxis: {
                    title: {
                        text: '吃水果个数'                // y 轴标题
                    }
                },
                series: [{                              // 数据列
                    name: '小明',                        // 数据列名
                    data: [1, 0, 4]                     // 数据
                }, {
                    name: '小红',
                    data: [5, 7, 3]
                }]
            };
            // 图表初始化函数
            var chart = Highcharts.chart('m1', options);
        </script>
    </div>
{% endblock %}

访问页面
在这里插入图片描述
其他配置与Echarts相同。

相关文章：

  • 用递归函数和栈操作逆序栈
  • java基于SpringBoot+Vue的学生选课作业系统 element
  • Excel数据分析
  • 机智云无需代码就能搞定IoT小程序开发和管理
  • RocketMQ 消费者拉取消息（Pull） 解析——图解、源码级解析
  • 字符串函数的详解
  • 【BOOST C++指针专题07】Boost.Pool
  • C# 文件/文件夹操作（文本写入，追加，覆盖，清空，文件/文件夹新建，复制，删除，移动）+驱动器+目录+路径+Path类大全
  • Less预处理——变量和嵌套
  • BEVerse 中数据集预处理代码浅析
  • 算法每日一题（合并两个有序的数组）
  • SpringBoot整合Swagger
  • ProcExp的利用
  • C++内存管理
  • 33、Java 异常掌握这些就够了（图解 Java 中的异常）
  • python3.6+scrapy+mysql 爬虫实战
  • 【407天】跃迁之路——程序员高效学习方法论探索系列（实验阶段164-2018.03.19）...
  • Angular数据绑定机制
  • C# 免费离线人脸识别 2.0 Demo
  • Java｜序列化异常StreamCorruptedException的解决方法
  • Javascript设计模式学习之Observer(观察者)模式
  • Java编程基础24——递归练习
  • leetcode-27. Remove Element
  • vue.js框架原理浅析
  • vue-router 实现分析
  • 程序员最讨厌的9句话，你可有补充？
  • 给初学者：JavaScript 中数组操作注意点
  • 网络应用优化——时延与带宽
  • 新书推荐|Windows黑客编程技术详解
  • 阿里云ACE认证学习知识点梳理
  • 蚂蚁金服CTO程立：真正的技术革命才刚刚开始
  • #include
  • $.proxy和$.extend
  • (04)odoo视图操作
  • （10）Linux冯诺依曼结构操作系统的再次理解
  • （4）事件处理——（2）在页面加载的时候执行任务（Performing tasks on page load）...
  • (C++20) consteval立即函数
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节（封闭类和Final方法）
  • (NSDate) 时间 (time )比较
  • （二）windows配置JDK环境
  • （附源码）ssm基于jsp高校选课系统 毕业设计 291627
  • (附源码)计算机毕业设计ssm本地美食推荐平台
  • （利用IDEA+Maven）定制属于自己的jar包
  • (强烈推荐)移动端音视频从零到上手（上）
  • （原）Matlab的svmtrain和svmclassify
  • （转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • (转)利用ant在Mac 下自动化打包签名Android程序
  • ＊Django中的Ajax 纯js的书写样式1
  • .NET Compact Framework 多线程环境下的UI异步刷新
  • .NET CORE 3.1 集成JWT鉴权和授权2
  • .net core使用ef 6
  • .NET Framework与.NET Framework SDK有什么不同？
  • .NET 常见的偏门问题
  • .Net 路由处理厉害了
  • .NET/C# 阻止屏幕关闭，阻止系统进入睡眠状态