前面我们已经在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 © 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图了,