【Django】教程-1-安装+创建项目+目录结构介绍
【Django】教程-2-前端-目录结构介绍
【Django】教程-3-数据库相关介绍
【Django】教程-4-一个增删改查的Demo
【Django】教程-5-ModelForm增删改查+规则校验【正则+钩子函数】
【Django】教程-6-搜索框-条件查询前后端
【Django】教程-7-分页，默认使用django的
【Django】教程-8-页面时间组件
【Django】教程-9-登录+退出
【Django】教程-10-ajax请求Demo，结合使用
【Django】教程-11-ajax弹窗实现增删改查

18. 图

18.1 柱状图

chart_view.py

from django.http import JsonResponse
from django.shortcuts import renderdef list(request):""" 数据统计页面"""return render(request, 'chart/chart_list.html')def chart_bar(request):""" 构造 柱状图的数据"""
# 具体数据，可以通过数据查询获取，修改具体字段的值，返回 legend = ["销量", "业绩"]x_axis = ['1月', '2月', '3月', '4月', "5月", "6月", "7月", "8月"]series = [{"name": '销量',"type": 'bar',"data": [10, 20, 15, 5, 8, 34, 33, 72]}, {"name": '业绩',"type": 'bar',"data": [15, 24, 53, 9, 25, 63, 21, 23]}]result = {"status": True,"data": {"legend": legend, "series": series, "x_axis": x_axis}}return JsonResponse(result)

urls.py 增加下面，layout.html 增加跳转连接 <li><a href="/chart/list">数据统计</a></li>

path('chart/list', chart_view.list),
path('chart/bar', chart_view.chart_bar),

chart_list.html

{% extends 'login/layout.html' %}
{% load static %}
{% block content %}<div class="container"><div class="panel panel-default"><div class="panel-heading">折线图</div><div class="panel-body">Panel content</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="m1" style="width: 680px;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">Panel content</div></div></div></div></div>{% endblock %}{% block js %}<script src="{% static 'js/echarts.min.js' %}"></script><script src=https://code.jquery.com/jquery-3.6.0.min.js></script><script type="text/javascript">$(function () {initBar();})/**初始化，柱状图* */function initBar() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('m1'));// 指定图表的配置项 和 数据var option = {title: {text: '业绩排行榜-展示'},tooltip: {},legend: {data: [], // 后台获取bottom: 0},xAxis: {data: [] // 后台获取},yAxis: {},series: [] // 后台获取};$.ajax({url: '/chart/bar',type: "get",dataType: "JSON",success: function (res) {// 将后台返回的数据，写到option中，if (res.status) {option.legend.data = res.data.legend;option.xAxis.data = res.data.x_axis;option.series = res.data.series;// 使用指定的配置项 和 数据显示图表myChart.setOption(option);}}})}</script>
{% endblock %}

效果图