python项目篇-从数据库获取数据以Json格式返回前端数据可视化方式显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27695659/article/details/85763828

views.py:
def adminEchartIncome(request):

    ret = models.incomeAccount.objects.all().order_by("dayIncome","id")
    # ret = serialize("json",ret)
    # print(ret)

    json_list = []

    for i in ret:
        json_dict = {}
        json_dict["id"] = i.id
        json_dict["totalIncome"] = i.totalIncome
        json_dict["dayIncome"] = i.dayIncome
        json_dict["remarkIncome"] = i.remarkIncome
        json_dict["totalBath"] = i.totalBath
        json_dict["totalBathHouse"] = i.totalBathHouse
        json_dict["totalHouse"] = i.totalHouse
        json_dict["totalPay"] = i.totalPay

        json_list.append(json_dict)

    ret1 = json.dumps(json_list)
    print(ret1,type(ret1))
    return render(request,'admin_chartIncome.html',{"ret": json.dumps(ret1)})

html:

{# 继承模板 #}
{% extends 'admin_base.html' %}
{% load static %}

{#把这个页面塞到模版#}
{% block page-main %}
    <h1 class="page-header">清泉后台管理页面--收入可视化</h1>

    <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">收入可视化 <i class="fa fa-thumb-tack pull-right"></i></div>
        <div class="panel-body">
            <div class="row" style="margin-bottom: 15px">
                <div class="col-md-4">
                    <div class="input-group">
{#                        <input type="text" class="form-control" placeholder="Search for...">#}
                        <span class="input-group-btn">
{#                                    <button class="btn btn-default" type="button">搜索</button>#}
                                </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-md-4 -->
                <div class="col-md-3 pull-right">
{#                    <a href="/adminAddincome/" class="btn btn-success pull-right">新页面添加</a>#}
{#                    <button class="btn btn-success pull-right" data-toggle="modal" data-target="#myModal">新增</button>#}
                </div>

            </div><!-- /.row -->

            <div id="echart" style="width: 600px;height:600px;">

            </div>
        </div>

    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart'));
        var ret={{ ret|safe }};
        var jsdayIncome = []
        var jstotallIncome = []
        var obj =JSON.parse(ret)
        console.log(obj);
        for(i in obj){
            jsdayIncome.push(obj[i]['dayIncome'])
        }
        for(i in obj){
            jstotallIncome.push(obj[i]['totalIncome'])
        }
        console.log(jsdayIncome)
        console.log(jstotallIncome)

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '每日收入可视化'
            },
            tooltip: {},
            legend: {
                data:['收入']
            },
            xAxis: {
                data: jsdayIncome
            },
            yAxis: {},
            series: [{
                name: '收入',
                type: 'bar',
                data: jstotallIncome
            }]
        };

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

{% block class_chartIncome %}
    active
{% endblock %}

总结：第一次直接用取数据库的数据格式报错，这在我的bug记录中有说明
其次使用以下代码：

def getdata(request):
   # 使用ORM
   # all()返回的是QuerySet 数据类型；values()返回的是ValuesQuerySet 数据类型
    ret = models.incomeAccount.objects.all().order_by("dayIncome","id")
 	ret = serialize("json",ret)
	print(ret)
	return render(request,'admin_chartIncome.html',{"ret": json.dumps(ret)})

ret返回的数据是：

[{"model": "qqsys.incomeaccount", "pk": 13, "fields": {"dayIncome": "2018-12-27", "totalBath": 108, "totalHouse": 0, "totalBathHouse": 108, "totalPay": 100, "totalIncome": 8, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 12, "fields": {"dayIncome": "2018-12-28", "totalBath": 497, "totalHouse": 200, "totalBathHouse": 697, "totalPay": 0, "totalIncome": 697, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 11, "fields": {"dayIncome": "2018-12-29", "totalBath": 342, "totalHouse": 0, "totalBathHouse": 342, "totalPay": 590, "totalIncome": -248, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 10, "fields": {"dayIncome": "2018-12-30", "totalBath": 955, "totalHouse": 340, "totalBathHouse": 1295, "totalPay": 709, "totalIncome": 586, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 3, "fields": {"dayIncome": "2018-12-31", "totalBath": 764, "totalHouse": 150, "totalBathHouse": 914, "totalPay": 369, "totalIncome": 545, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 9, "fields": {"dayIncome": "2019-01-01", "totalBath": 846, "totalHouse": 229, "totalBathHouse": 1075, "totalPay": 1035, "totalIncome": 40, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 8, "fields": {"dayIncome": "2019-01-02", "totalBath": 372, "totalHouse": 270, "totalBathHouse": 642, "totalPay": 3708, "totalIncome": -3066, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 16, "fields": {"dayIncome": "2019-01-03", "totalBath": 466, "totalHouse": 349, "totalBathHouse": 815, "totalPay": 340, "totalIncome": 475, "remarkIncome": ""}}] <class 'str'>

但是这种json不是我们想要的取不出想要的数据
所以最好使用我开头写的方式