Django+xadmin+echarts在后台动态显示echarts图表，实现后台定制化开发

本篇博客将Django+xadmin+echarts在后台动态显示echarts图表

#app/adminx.py
#从user模型中导入User表
from users.models import User
class ChangeIntoAdmin(object):
    # 指向自定义的页面
    object_list_template = 'base111.html'
    # 重写方法，把要展示的数据更新到 context
    def get_context(self):
        context = CommAdminView.get_context(self)
        #获取所有的用户
        users = User.objects.all()
        #获取用户的一个属性，将显示到
        base_list = []
        #获取用户名
        name_list = []
        for user in users:
            name_list.append(user.name)
            base_list.append(user.base_mark)
        context.update(
            {
                'name_list': name_list,
                'base_list': base_list,
            }
        )
        return context
#进行注册
xadmin.site.register(Book, ChangeIntoAdmin)

#base111.html
{# 继承自xadmin中的base_site.html #}
{% extends 'xadmin/base_site.html' %}

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

{% endblock %}
{% block extrastyle %}
{#这个block块中添加echarts.min.js，前提是在static文件夹下放入echarts.min.js,也可以引入其他样式，这个块是在xadmin/base.html中#}
<script src="{% static 'js/echarts.min.js' %}"  charset="utf-8"></script>
{% endblock %}
{% block content %}
<div>zhelishige
    <div id="chart_1" style="width:500px; height:500px">在这里</div>
</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chart_1'));
option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        {# 这里是填入的数据 #}
        data: {{ name_list|safe }}
    },
    yAxis: {
        type: 'value'
    },
    series: [{
    	{# 这里是填入的数据 #}
        data:{{base_list}},
        type: 'line',
        areaStyle: {}
    }]
};
myChart.setOption(option);
</script>
{% endblock content %}

显示效果（修改css样式即可显示的更加美观）

常见的一些问题：
1.在添加echarts后，左侧导航栏显示你没有权限修改任何东西的错误，请移步：Django2.1.7 xadmin后台开发中出现“你无权修改任何东西”的错误
2.echarts中div层不显示：可能是在div中没有添加css样式，解决方案，在相应的div中添加样式，如下所示：

<div id="chart_1" style="width:500px; height:500px"></div>

其他优化xadmin方法，以及解决方案：
1.Django的开发中遇到的一些问题以及解决方案，包括Django-xadmin的优化
2.django-xadmin实现自定义后台，进行个性化显示