Django結合Echarts在前端展示資料

Tsissan發表於2021-12-03
DjangoEcharts前端

前言

最近在用Django寫UI自動化測試平臺，基本快要弄完了，但是首頁只有專案列表展示，一直感覺很空曠，所以想把一些關鍵資料在首頁展示出來。
這時就想到利用Echarts這個開源專案，但是Django怎麼把資料傳給前端，前端又怎麼接收就遇到了難題。然後開始在網上不停搜尋，找到了一篇寫的挺不錯的部落格，地址:https://www.cnblogs.com/Neeo/articles/12156140.html

正文

按照這篇部落格的描述，程式碼複製貼上，一執行大功告成。

但是新的問題來了，資料現在是寫死的，我不可能每次手動改，所以就要想辦法把資料通過Django傳給前端。

餅狀圖我準備也跟博主一樣，顯示用例的執行情況，所以需要分別計算出用例已執行和未執行的情況

 no_execute = DB_case.objects.filter(update_time='1970-01-01 00:00:00').count()
 total = DB_case.objects.count()

因為剛建立的用例我會把最近修改時間置為1970-01-01 00:00:00，執行成功的用例我才會去更新最近修改時間，
通過ORM篩選出未執行用例和總用例數，相減得到已執行用例的數量

柱狀圖我準備展示每個專案各自的用例情況，每個專案都是前端自行新增，所以不能把專案數量寫死，只有遍歷拿到
每個專案名，但專案名還要和各自的用例關聯起來，所以必須傳給前端物件陣列

bar = []
data = list(res['clients'].values())
for i in data:
  bar.append({'name': i['name'], 'num': DB_case.objects.filter(client_id=i['id']).count()})

傳給前端後，事情還沒有告一段落，前端還需要解析物件陣列，把專案名和用例數單獨放在各自的陣列中

arr_name = new Array()
arr_num = new Array()
for (let i = 0; i < data.length; i++) {
  arr_name.push(data[i]['name'])
  arr_num.push(data[i]['num'])
}

實現效果

結尾

檢視函式完整程式碼：

def home(request):
    res = dict()
    res['username'] = request.user.username
    res['href'] = DB_href.objects.all()
    res['clients'] = DB_client.objects.all()
    if request.method == "POST":
        no_execute = DB_case.objects.filter(update_time='1970-01-01 00:00:00').count()
        total = DB_case.objects.count()
        obj = ([{'value': no_execute, 'name': '未執行'}, {'value': total - no_execute, 'name': '已執行'}], ['未執行', '已執行'])
        bar = []
        data = list(res['clients'].values())
        for i in data:
            bar.append({'name': i['name'], 'num': DB_case.objects.filter(client_id=i['id']).count()})
        return JsonResponse({"obj": obj, 'bar': bar})
    else:
        return render(request, 'home.html', res)

前端Echarts程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>



<div id="Pie1" style="width: 50%;height:300px;margin-left: 25%"></div>
<div id="barSimple" style="width: 50%;height:300px;margin-left: 25%"></div>


</body>

{#<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>#}
<script src="https://cdn.bootcss.com/echarts/3.0.0/echarts.min.js"></script>
<script>
    // 餅圖
    function Pie1(data) {
        let myChart = echarts.init(document.getElementById('Pie1'));
        option = {
            title: {
                text: '用例執行狀態統計',
                subtext: '',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: data[1]
            },
            series: [
                {
                    name: '用例執行狀態',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data:data[0],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);


    }


    // 柱狀圖
    function barSimple(data) {
        let myChart = echarts.init(document.getElementById('barSimple'));
        arr_name = new Array()
        arr_num = new Array()
        for (let i = 0; i < data.length; i++) {
            arr_name.push(data[i]['name'])
            arr_num.push(data[i]['num'])
        }
        option = {
            title: {
                text: '各個專案指令碼數量'
        },
        legend: {
          data: ['數量']
        },
            xAxis: {
                type: 'category',
                data: arr_name
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '數量',
                data: arr_num,
                type: 'bar'
            }]
        };
        myChart.setOption(option)
    }

    window.onload = function () {
        $.ajax({
            url: "/home/",
            type:"POST",
            data: {"k1": "v1"},
            success: function (data) {
                // 餅圖
                Pie1(data['obj']);
                // 柱狀圖
                barSimple(data['bar']);
                console.log(data)
            }
        })
    }
</script>
</html>

相關文章