前面我们已经在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 %}
首页
myadmin-订餐系统后台管理
- Level
- Here
150
新订单
更多信息
53%
Bounce Rate
更多信息
44
用户注册
更多信息
65
Unique Visitors
More info
折线图
图1
柱状图
图2
饼图
图3
{% endblock %}
{% block js %}
{% endblock %}
其中，父模板myadmin/base.html完整代码为：
{% load static %}
系统后台管理
/
系统后台管理
{{ request.session.adminuser.username }} . 管理员
在线
- 主要导航
- 首页
- 求职用户管理
- 岗位管理
-
企业管理
- 企业分类
- 企业信息
- 企业用户管理
- 权限管理
- 数据统计
- 系统配置
- 认证体系
{% block main_body %}
{% endblock %}
{% block js %}
{% endblock %}
[Title]
[Message]
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 %}
首页
myadmin-订餐系统后台管理
- Level
- Here
150
新订单
更多信息
53%
Bounce Rate
更多信息
44
用户注册
更多信息
65
Unique Visitors
More info
折线图
图1
柱状图
饼图
图3
{% endblock %}
{% block js %}
{# 数据统计模块 2022.5.1 #}
{% endblock %}
5、重新运行django项目，在浏览器输入http://127.0.0.1:8000/myadmin/
就可以看到echarts图了，
