django之 echarts数据可视化3：使用ajax传递数据

最新推荐文章于 2024-07-24 23:36:41 发布

水w

最新推荐文章于 2024-07-24 23:36:41 发布

阅读量3.3k

点赞数 5

分类专栏： # 数据可视化文章标签： echarts django 前端

本文链接：https://blog.csdn.net/qq_45956730/article/details/124535474

版权

数据可视化专栏收录该内容

6 篇文章 2 订阅

订阅专栏

前面我们已经在django框架项目里实现了简单的echarts数据可视化。本篇是在前两篇

django之 echarts数据可视化_水w的博客-CSDN博客

django之 echarts数据可视化2：导入数据库数据_水w的博客-CSDN博客的基础上进行的。

而且注意：本篇与上一篇使用的不是同一个echarts示例。

在前面的基础上，现在我们想要通过ajax请求来刷新带echarts图表的页面。

首先，我们先了解一个ajax请求是干什么的，为什么要用它？

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

只会局部更新， 浏览器地址栏不会发生变化

通过后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。也就是在不需要重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页不使用ajax，如果需要更新内容，必须重新加载整个页面。

步骤：

1、继承父模板myadmin/base.html，新建一个myadmin/index.html子文件，后续步骤都是在此html基础上进行添加的。

注意：jquery.min.js、echarts.js需要提前下载好

{% extends  'myadmin/base.html' %}
{% load static %}

{% block main_body %}
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        首页
        <small>myadmin-订餐系统后台管理</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content container-fluid">

      <!-- Small boxes (Stat box) -->
      <div class="row">
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>150</h3>

              <p>新订单</p>
            </div>
            <div class="icon">
              <i class="ion ion-bag"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-green">
            <div class="inner">
              <h3>53<sup style="font-size: 20px">%</sup></h3>

              <p>Bounce Rate</p>
            </div>
            <div class="icon">
              <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-yellow">
            <div class="inner">
              <h3>44</h3>

              <p>用户注册</p>
            </div>
            <div class="icon">
              <i class="ion ion-person-add"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-red">
            <div class="inner">
              <h3>65</h3>

              <p>Unique Visitors</p>
            </div>
            <div class="icon">
              <i class="ion ion-pie-graph"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
      </div>

    </section>
    <!-- /.content -->
    <div class="shuju_tj">
        <div class="panel panel-default">
          <div class="panel-heading">折线图</div>
          <div class="panel-body">
            图1
          </div>
        </div>
       <div class="row">
           <div class="col-sm-8">
               <div class="panel panel-default">
                  <div class="panel-heading">柱状图</div>
                  <div class="panel-body">
                    图2
                  </div>
                </div>
           </div>
           <div class="col-sm-4">
               <div class="panel panel-default">
                  <div class="panel-heading">饼图</div>
                  <div class="panel-body">
                    图3
                  </div>
                </div>
           </div>
       </div>

   </div>
{% endblock %}


{% block js %}
    <script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
    <script src="{% static 'dist/js/echarts.js' %}"></script>
{% endblock %}

其中，父模板myadmin/base.html完整代码为：

{% load static %}
<!DOCTYPE html>
<!-- 父模板：模板继承 -->
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>系统后台管理</title>
  <!-- 支持响应式布局 -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="{% static 'bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
  <!-- 象形字体 -->
  <link rel="stylesheet" href="{% static 'bower_components/font-awesome/css/font-awesome.min.css' %}">
  <!-- 图标 -->
  <link rel="stylesheet" href="{% static 'bower_components/Ionicons/css/ionicons.min.css' %}">
  <!-- 主题风格样式 -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE 皮肤.这里选择的是skin-blue样式，我们还可以有其他皮肤可以选择. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/skin-blue.min.css' %}">
  <!-- 兼容IE9以下浏览器 -->
  <!--[if lt IE 9]>

  <![endif]-->
  <!-- Google Font -->
  <link rel="stylesheet" href="{% static 'local/css/google_fonts.css' %}">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- Main Header 主体页头 -->
  <header class="main-header">

    <!-- Logo -->
    <a href="index2.html" class="logo">
      <!-- 侧栏迷你徽标 mini 50x50 pixels -->
      <span class="logo-mini"><b>/</b></span>
      <!-- 常规状态标志和移动设备标志 -->
      <span class="logo-lg"><b>系统后台管理</b></span>
    </a>

    <!-- Header Navbar 首部导航栏 -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button 侧边栏切换按钮 -->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">切换导航</span>
      </a>
      <!-- 右栏菜单 -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <!-- messages-menu 消息菜单: 样式可以在 dropdown.less 中找到 -->
          <li class="dropdown messages-menu">
            <!-- Menu toggle button 菜单切换按钮 -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-envelope-o"></i>
              <span class="label label-success">4</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">你有4个短信息</li>
              <li>
                <!-- 内部菜单：包含消息 -->
                <ul class="menu">
                  <li><!-- start message 信息开始 -->
                    <a href="#">
                      <div class="pull-left">
                        <!-- User Image 使用图片 -->
                        <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
                      </div>
                      <!-- 消息标题和时间 -->
                      <h4>
                        我们都支持团队
                        <small><i class="fa fa-clock-o"></i> 5 分钟</small>
                      </h4>
                      <!-- The message -->
                      <p>Why not buy a new awesome theme?</p>
                    </a>
                  </li>
                  <!-- end message -->
                </ul>
                <!-- /.menu -->
              </li>
              <li class="footer"><a href="#">查看所有信息</a></li>
            </ul>
          </li>
          <!-- /.messages-menu -->

          <!-- Notifications Menu 通知菜单 -->
          <li class="dropdown notifications-menu">
            <!-- Menu toggle button  菜单切换按钮 -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bell-o"></i>
              <span class="label label-warning">10</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">你有10条通知信息</li>
              <li>
                <!-- Inner Menu: contains the notifications -->
                <ul class="menu">
                  <li><!-- start notification -->
                    <a href="#">
                      <i class="fa fa-users text-aqua"></i> 今天有5名新成员加入
                    </a>
                  </li>
                  <!-- end notification -->
                </ul>
              </li>
              <li class="footer"><a href="#">查看全部</a></li>
            </ul>
          </li>
          <!-- Tasks Menu 任务菜单 -->
          <li class="dropdown tasks-menu">
            <!-- Menu Toggle Button 菜单切换按钮 -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-flag-o"></i>
              <span class="label label-danger">9</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">你有9个任务</li>
              <li>
                <!-- Inner menu: contains the tasks -->
                <ul class="menu">
                  <li><!-- Task item -->
                    <a href="#">
                      <!-- Task title and progress text -->
                      <h3>
                        设计一些按钮
                        <small class="pull-right">20%</small>
                      </h3>
                      <!-- The progress bar -->
                      <div class="progress xs">
                        <!-- Change the css width attribute to simulate progress -->
                        <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                             aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                          <span class="sr-only">20% 完成</span>
                        </div>
                      </div>
                    </a>
                  </li>
                  <!-- end task item -->
                </ul>
              </li>
              <li class="footer">
                <a href="#">查看所有任务</a>
              </li>
            </ul>
          </li>
          <!-- User Account Menu -->
          <li class="dropdown user user-menu">
            <!-- Menu Toggle Button -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <!-- The user image in the navbar-->
              <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="user-image" alt="User Image">
              <!-- hidden-xs hides the username on small devices so only the image appears. -->
              <span class="hidden-xs">{{ request.session.adminuser.username }}</span>
            </a>
            <ul class="dropdown-menu">
              <!-- The user image in the menu -->
              <li class="user-header">
                <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">

                <p>
                  {{ request.session.adminuser.username }} - 管理员
                  <small>{{ request.session.adminuser.created_at }}加入</small>
                </p>
              </li>
              <!-- Menu Footer-->
              <li class="user-footer">
                <div class="pull-left">
                  <a href="#" class="btn btn-default btn-flat">个人信息</a>
                </div>
                <div class="pull-right">
                  <a href="{% url 'home:home_logout' %}" class="btn btn-default btn-flat">退 出</a>
                </div>
              </li>
            </ul>
          </li>

        </ul>
      </div>
    </nav>
  </header>

  <!-- 左侧柱。包含徽标和边栏 -->
  <aside class="main-sidebar">

    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">

      <!-- Sidebar user panel (optional) -->
      <div class="user-panel">
        <div class="pull-left image">
          <img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
        </div>
        <div class="pull-left info">
          <p>{{ request.session.adminuser.username }} . 管理员</p>
          <!-- Status -->
          <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <ul class="sidebar-menu" data-widget="tree">
        <li class="header">主要导航</li>
        <!-- 导航列表，你可以自行更改图标 -->
        <li class="active"><a href="{% url 'myadmin_index' %}"><i class="fa fa-home"></i> <span>首页</span></a></li>

        <li><a href="{% url 'myadmin_user_index' 1 %}"><i class="fa fa-users"></i> <span>求职用户管理</span></a></li>
        <li><a href="{% url 'myadmin_job_index' 1 %}"><i class="fa fa-sitemap"></i> <span>岗位管理</span></a></li>
        <li class="treeview">
          <a href="#"><i class="fa fa-cutlery"></i> <span>企业管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="category.html"> <i class="fa fa-circle-o"></i> 企业分类</a></li>
            <li><a href="{% url 'myadmin_company_index' 1 %}"> <i class="fa fa-circle-o"></i> 企业信息</a></li>
          </ul>
        </li>
        <li><a href="{% url 'myadmin_employer_index' 1 %}"><i class="fa fa-shopping-cart"></i> <span>企业用户管理</span></a></li>

        <li><a href="#"><i class="fa fa-key"></i> <span>权限管理</span></a></li>
        <li><a href="{% url 'myadmin_chart_list' %}"><i class="fa fa-key"></i> <span>数据统计</span></a></li>
        <li><a href="#"><i class="fa fa-gear"></i> <span>系统配置</span></a></li>
        <li><a href="#"><i class="fa fa-unlock-alt"></i> <span>认证体系</span></a></li>
      </ul>
      <!-- /.sidebar-menu -->
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    {% block main_body %}
    {% endblock %}
    {% block js %}
    {% endblock %}
  </div>
  <!-- /.content-wrapper -->


  <!-- Main Footer -->
  <footer class="main-footer">
    <!-- To the right -->
    <div class="pull-right hidden-xs">
      <!--餐饮管理平台-->
    </div>
    <!-- Default to the left -->
    <strong>Copyright &copy; 2022 <a href="#">北京****有限公司</a>.</strong> 版权所有
  </footer>

  <!-- 添加侧栏的背景。必须放置此处紧接在控制侧边栏之后 -->
  <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- edu-model提示框模板 -->
<div id="edu-alert" class="modal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
      </div>
      <div class="modal-body small">
        <p>[Message]</p>
      </div>
      <div class="modal-footer" >
        <button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
        <button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
      </div>
    </div>
  </div>
</div>
<!-- edu-model-end -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>

<script src="{% static 'dist/js/edu-modal-alert-confirm.js' %}"></script>

<!-- 此处可以添加SimLoopl和FastClick插件，用于增强用户体验。 -->

<script type="text/javascript">
    function doDelete(url) {
        Modal.confirm({
            msg: "确定要删除吗？",
            title: ' 信息提示',
            btnok: '确定',
            btncl:'取消'
          }).on(function (e){
            if(e){
              window.location.href=url;
              //Modal.alert({msg: "成功删除",title: ' 信息提示',btnok: '确定',btncl:'取消'});
            }
          });
    }
</script>
</body>
</html>

2、在django项目的应用myadmin里的myadmin/urls.py文件下添加路由：

path('chart/bar/',views.myadmin_chart_bar, name="myadmin_chart_bar"),

myadmin/urls.py全部代码为：

from django.contrib import admin
from django.urls import path
from myadmin import views
# 后台管理子路由

# app_name = 'myadmin'
urlpatterns = [
    path('', views.myadmin_index, name="myadmin_index"),  # myadmin的首页

    """数据统计路由"""
    path('chart/list/', views.myadmin_chart_list, name="myadmin_chart_list"),
    path('chart/bar/', views.myadmin_chart_bar, name="myadmin_chart_bar"),
    path('chart/ajax/',views.myadmin_chart_ajax, name="myadmin_chart_ajax"),

    """系统后台管理的视图文件"""
    # Create your views here.
    def myadmin_index(request):
        """myadmin的首页"""
        return render(request,"myadmin/index/index.html")

]

3、在django项目的应用myadmin里的myadmin/views.py文件下修改函数“myadmin_chart_bar”：

import time
from unittest import result
from django.shortcuts import render, redirect
from django.http import HttpResponse, JsonResponse
from django.urls import reverse
from django.views.decorators.csrf import csrf_protect, csrf_exempt

from myadmin.models import User, Job, Company
from django.core.paginator import Paginator
from django.db.models import Q
from datetime import datetime

"""数据统计的视图文件"""
def myadmin_chart_list(request):
    """数据统计：首页"""
    return render(request,"myadmin/shuju.html")

def myadmin_chart_bar(request):
    """数据统计：构造柱状图数据"""
    # 数据可以去数据库中获取
    legend = ["梁吉宁","吴培基"]
    x_axis = ['1月', '2月', '3月', '4月', '5月', '6月']
    series_list = [
        {
            'name': '梁吉宁',
            'type': 'bar',
            'data': [5, 20, 36, 10, 10, 20]
        },
        {
            'name': '吴培基',
            'type': 'bar',
            'data': [15, 10, 30, 20, 30, 20]
        }
    ]
    result = {
        "status": True,
        "data": {
            "legend": legend,
            "series_list": series_list,
            "x_axis": x_axis,
        }
    }
    print(json.dumps(result))
    # return HttpResponse(json.dumps(result))
    return JsonResponse(result)

数据result就可以通过JsonResponse传递到前端。

4、现在，对新建的myadmin/index.html进行修改：

主要修改的地方有两处：

（1）第一处为：需要将原先红线框的位置的“图2”改为一个div标签，并且将id属性值为“m2”，用来之后存放我们的echarts图。

（2）第二处为：block为js的这个块里面需要写入“script”标签，

1、ajax请求在页面加载时就会发送ajax请求到“/myadmin/chart/bar/”路径，
2、此路径会调用myadmin/views.py文件里的“myadmin_chart_bar”函数，后端对ajax传递来的数据进行处理
3、如果传递成功，通过res就将将后台返回的数据传递到了前端，
4、我们需要将后台返回的数据赋值更新到ecahrts图表的option中。
5、使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

修改之后的myadmin/index.html全部代码为：

{% extends  'myadmin/base.html' %}
{% load static %}

{% block main_body %}
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        首页
        <small>myadmin-订餐系统后台管理</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content container-fluid">

      <!-- Small boxes (Stat box) -->
      <div class="row">
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-aqua">
            <div class="inner">
              <h3>150</h3>

              <p>新订单</p>
            </div>
            <div class="icon">
              <i class="ion ion-bag"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-green">
            <div class="inner">
              <h3>53<sup style="font-size: 20px">%</sup></h3>

              <p>Bounce Rate</p>
            </div>
            <div class="icon">
              <i class="ion ion-stats-bars"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-yellow">
            <div class="inner">
              <h3>44</h3>

              <p>用户注册</p>
            </div>
            <div class="icon">
              <i class="ion ion-person-add"></i>
            </div>
            <a href="#" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <div class="small-box bg-red">
            <div class="inner">
              <h3>65</h3>

              <p>Unique Visitors</p>
            </div>
            <div class="icon">
              <i class="ion ion-pie-graph"></i>
            </div>
            <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
      </div>

    </section>
    <!-- /.content -->
    <div class="shuju_tj">
        <div class="panel panel-default">
          <div class="panel-heading">折线图</div>
          <div class="panel-body">
            图1
          </div>
        </div>
       <div class="row">
           <div class="col-sm-8">
               <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">
               <div class="panel panel-default">
                  <div class="panel-heading">饼图</div>
                  <div class="panel-body">
                    图3
                  </div>
                </div>
           </div>
       </div>

   </div>
{% endblock %}


{% block js %}
    <script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
    <script src="{% static 'dist/js/echarts.js' %}"></script>
{# 数据统计模块 2022.5.1 #}
    <script type="text/javascript">
        $(function () {
            initBar();
        })
        /**
         * 初始化柱状图
         * */

         function initBar() {
              // 基于准备好的dom，初始化echarts实例
              var myChart = echarts.init(document.getElementById('m2'));
              // 指定图表的配置项和数据
              var option = {
                    title: {
                      text: 'ECharts 入门示例',
                    },
                    tooltip: {},
                    legend: {
                      data: [], // 后台获取
                      bottom:0  //bottom 调节标题的位置
                    },
                    xAxis: {
                      data: [] // 后台获取
                    },
                    yAxis: {},
                    series: []
              };


              $.ajax({
                  url: '/myadmin/chart/bar/',
                  type: 'get',
                  dataType: 'json',
                  success: function(res) {
                      // 将后台返回的数据更新到option中
                      if (res.status) {
                          option.legend.data = res.data.legend;
                          option.series = res.data.series_list;
                          option.xAxis.data = res.data.x_axis;
                          // 使用刚指定的配置项和数据显示图表。
                          myChart.setOption(option);
                      }
                  }
              })
        }

    </script>
{% endblock %}

5、重新运行django项目，在浏览器输入http://127.0.0.1:8000/myadmin/

就可以看到echarts图了，