前言

最近在用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>

Django结合Echarts在前端展示数据的更多相关文章

  1. webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

    地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...

  2. 巨蟒django之权限9:前端展示修改删除合并&&权限展示

    1.权限组件控制流程(硬核重点) 2.权限组件控制流程 3.角色管理 4.删除合并 5.权限展示

  3. flask+layui+echarts实现前端动态图展示数据

    效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...

  4. django+xadmin+echarts实现数据可视化

    使用xadmin后功能比较强大,在后台展示统计图表,这个需求真的有点烫手,最终实现效果如下图: xadmin后台与echarts完全融合遇到以下问题: 1.没有现成的数据model 2.获得指定时间段 ...

  5. 使用echarts开发电子屏数据展示页面

    背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...

  6. echarts实现中国地图数据展示

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  7. echarts.js多图表数据展示使用小结

    echarts api文档: http://echarts.baidu.com/echarts2/doc/doc.html echarts demo示例: http://echarts.baidu.c ...

  8. Python Django 前后端数据交互 之 后端向前端发送数据

    Django 前后台的数据传递 严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...

  9. [py]access日志入mysql-通过flask前端展示

    目录 pymysql组装sql入库日志 代码组织 将入库的日志通过flask前端展示 pymysql组装sql入库日志 pymysql模块的用法 采集这些指标(metirc)都是linux环境,会用到 ...

随机推荐

  1. 震惊，本Orzer下阶段直接怒送四个笑脸

    众所周知,在hzoi帝国中,Wzx是最菜的.那么究竟有多菜呢?下面就和小编一起来看看吧. 近日,hzoi最菜的wzx在第四阶段竟然怒送4个笑脸,同机房神犇直呼wzx太菜了! 以上就是wzx第四阶段怒送 ...

  2. 单片机stm32 USART串口实际应用解析

    stm32作为现在嵌入式物联网单片机行业中经常要用多的技术,相信大家都有所接触,今天这篇就给大家详细的分析下有关于stm32的出口,还不是很清楚的朋友要注意看看了哦,在最后还会为大家分享有些关于stm ...

  3. 绘制PCB电路原理图的8种方法

    1.选择集成电路,变压器,晶体管等组件,这些组件体积庞大,有许多引脚并在电路中起主要作用,然后从选定的参考引脚中抽取,以减少错误. 2.如果PCB上标有元件编号(如VD870,R330,C466等), ...

  4. TCP/IP简述

    一.TCP/IP简述 TCP/IP从字面异议看起来是指TCP和IP两种协议,实际上,它只是利用IP进行通信时必须用到的协议群的统称.具体的来说,IP或ICMP.TCP或UDP.Telnet或FTP.以 ...

  5. OpenWrt编译报错：Package airfly_receiver is missing dependencies for the following libraries

    今天在编译一个OpenWrt测试用例的时候出现报错 Package airfly_receiver is missing dependencies for the following librarie ...

  6. 详细剖析Spring Cloud 和Spring Cloud Alibaba的前世今生

    我们知道spring cloud可以用来开发微服务,但是应该很少有人真正知道Spring Cloud是什么. 官方的解释是:spring cloud提供了一些可以让开发者快速构建分布式应用的工具,这些 ...

  7. Linux&C网络编程————“聊天室”

    从上周到现在一直在完成最后的项目,自己的聊天室,所以博客就没怎么跟了,今天晚上自己的聊天室基本实现,让学长检查了,也有好些bug,自己还算满意,主要实现的功能有: 登录注册 附近的人(服务器端全部在线 ...

  8. Allure 生成测试报表

    Allure官方文档参考地址:https://docs.qameta.io/allure/#_testng 1.在maven中添加依赖并进行相应的配置: <!-- 实现版本控制 --> & ...

  9. webpack 之 一个简单的基本生产环境配置

    webpack 之 一个简单的基本生产环境配置 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = r ...

  10. 体验.NET Core使用IKVM对接Java

    前言 与第三方对接最麻烦的是语言不同,因语言不同内置实现相关标准加密算法还是略微有所差异,对接单点登录场景再寻常不过,由于时间紧迫且对接方使用Java,所以留给我对接开发和联调的时间本就不多,于是乎, ...