【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 %}

效果圖