Django结合Echarts在前端展示数据

前言

最近在用Django写UI自动化测试平台,基本快要弄完了,但是首页只有项目列表展示,一直感觉很空旷,所以想把一些关键数据在首页展示出来。
这时就想到利用Echarts这个开源项目,但是Django怎么把数据传给前端,前端又怎么接收就遇到了难题。然后开始在网上不停搜索,找到了一篇
写的挺不错的博客,地址:https://www.cnblogs.com/Neeo/articles/12156140.html

正文

按照这篇博客的描述,代码复制粘贴,一运行大功告成。
Django结合Echarts在前端展示数据_第1张图片
但是新的问题来了,数据现在是写死的,我不可能每次手动改,所以就要想办法把数据通过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代码:




    {% load static %}
    
    
    
    Title





{##}

你可能感兴趣的:(Django结合Echarts在前端展示数据)