django中的xadmin自定义页面集成echarts深度定制

概述：xadmin作为Django的一种后台管理框架，给我们提供了非常灵活的插件机制。除了我们在官网中可以看到的Xadmin plugin，包括Action、data filters、图表插件、书签、数据导出功能等，我们还可以通过继承它的BaseAdminPlugin父类来进行更强大的定制。

在一些特殊的需求中，当我们对xadmin的数据管理平台有一些更加个性化的需求时，xadmin自带的默认插件可能就满足不我们了。如我们都知道xadmin是一个数据管理平台，但现在的需求是需要在这个数据管理平台中嵌入一些非数据页面，比如输入框、表单等，我们就需要自己手动对xadmin进行扩展。首先，如果要在xadmin中展示一个数据管理页面，首先是在Django的models.py文件中创建一个Model类，再通过adminx.py文件将创建的models注册到xadmin中，最后在页面上对该models对一些操作管理显示出来。现在我们要新增一个自定义的页面，同样需要在models.py文件中新增一个类，并继承models.Model父类，由于我们要创建的页面并不是用于作数据管理，所以该model中不需要编写任何的字段，直接写它的Meta。

效果图1定义页面：                                                                                                     

1. models.py代码

from django.db import models


class Test(models.Model):
    class Meta:
        verbose_name = u"自定义页面"
        verbose_name_plural = verbose_name

注意：如果点击自定义页面报错，就迁移一下文件，生成数据表即可，库里会多一张没用的表，后面我们会将在原有的页面上进行扩张而不新建页面

接下来，在adminx.py文件中对我们刚刚创建的Test model编写相应的TestAdmin：

2. adminx.py代码

import xadmin
from .models import Students, Test
from xadmin.views import CommAdminView

class TestAdmin(object):
    object_list_template = "test.html"

    def get_context(self):
        context = CommAdminView.get_context(self)
        students = Students.objects.all().order_by("enter_date")
        enter_date = []
        age = []
        for s in students:
            # 必须把datetime类型转换为字符串类型
            enter_date.append(s.enter_date.strftime("%Y-%m-%d"))
            age.append(s.age)
        context.update(
            {
                "enter_date": enter_date,
                "age": age
            }
        )
        return context


# 注册
xadmin.site.register(Test, TestAdmin)

3. html代码

{#test.html#}
{#继承自xadmin/base_site.html#}
{% extends 'xadmin/base_site.html' %}

{# 去掉标签栏 #}
{% block content-nav %}

{% endblock %}

{% block content %}
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
    <div id="echarts_bar" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('echarts_bar'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['年龄']
            },
            xAxis: {
                {#data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]#}
                data: {
   
   { enter_date | safe }}  // safe禁用转义
            },
            yAxis: {},
            series: [{
                name: '年龄',
                type: 'bar',  // 柱状图
                {#type: 'line',  // 折线图#}
                {#type: 'pie',#}
                {#data: [5, 20, 36, 10, 10, 20]#}
                data: {
   
   { age }}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
    </script>
{% endblock content %}