django admin自定义页面

通过changelist_view来指定模板

class CostAdmin(admin.ModelAdmin):
    list_display = ("id", "idcname", "costnum", "content", "createdate")
    list_per_page = 10

    def changelist_view(self, request, extra_context=None):
        # Aggregate new subscribers per day
        #print(request.GET)
        this_year = request.GET.get("year")
        if not this_year:
            this_year = time.strftime("%Y", time.localtime(time.time()))
        year_data = (
            Cost.objects.filter(createdate__year=this_year).extra(select={"year":"strftime('%%Y',cost.createdate)"}).values("year","idcname").annotate(sum_costnum=Sum("costnum")).values("year","idcname__name","sum_costnum").order_by()
        )

        extra_context = extra_context or {"month_data": month_data, "year_data":year_data}

        # Call the superclass changelist_view to render the page
        return super().changelist_view(request, extra_context=extra_context)

    #添加新的URL
    def get_urls(self):
        urls = super().get_urls()
        extra_urls = [
            path("chart_data/", self.admin_site.admin_view(self.chart_data_endpoint))
        ]
        return extra_urls + urls

    def chart_data_endpoint(self, request):
        chart_data = [1,2,3,4,5,6]
        return JsonResponse(list(chart_data), safe=False)

admin.site.register(Cost, CostAdmin)

模板路径
templates/admin/cost/cost/change_list.html 
-rw-r--r-- 1 root root 2740 Feb  7 09:38 templates/admin/cost/cost/change_list.html

{% load static %}

{% block extrahead %}
<link rel="stylesheet" href="http s://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" cros
sorigin="anonymous">
<script type="text/javascript" src="http s://cdn.staticfile.org/echarts/5.3.3/echarts.min.js"></script>
<script src="http s://unpkg.com/vue@next"></script>
<script src="http s://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

{% endblock %}

{% block content %}
<div id="app">
        ${ message }<br>
         <button @click="count++">${ count }+</button>
         <button @click="count--">${ count }-</button>
</div>

<table border="1">
  <thead>
  <tr>
    <th>年</th>
    <th>供应商</th>
        <th>金额</th>
  </tr>
  </thead>
  <tbody>
  {% for i in year_data %}
  <tr>
    <td>{{i.year}}</td>
    <td>{{i.idcname__name}}</td>
    <td>{{i.sum_costnum}}</td>
  </tr>
  {% endfor %}
  </tbody>
</table>
<hr>

{{ block.super }}
<hr>

    <div id="main" style="width:100%;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '每月统计'
            },
            tooltip: {},
            label: {
                show: false,
            },
            legend: {
                data:{{ legend|safe }},
                right: '4%',
            },
            xAxis: {
                data: {{ axis|safe }}
            },
            yAxis: {
                type: 'log',
                min:1,
                logBase:10
            },
            series: {{ result|safe }}
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        const HelloVueApp = {
                compilerOptions: {
            delimiters: ['${', '}'],
            comments: true
        },
                data() {
                return {
                        message: 'Hello Vue!!',
                                count: 0,
                }
                },
                mounted () {
                        axios.get('/admin/cost/cost/chart_data/')
                        .then(response => (this.message = response.data))
                        .catch(function(error){console.log(error)});
                }
                }
                Vue.createApp(HelloVueApp).mount('#app');

    </script>
    <script src="http s://cdn.staticfile.org/jquery/1.12.4/jquery.min.js" ></script>
    <script src="http s://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anony
mous"></script>


{% endblock %}