心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

Django结合Echarts在前端展示数据

发布时间：2022-06-29 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Django结合Echarts在前端展示数据，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

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

正文

按照这篇博客的描述，代码复制粘贴，一运行大功告成。

Django结合Echarts在前端展示数据

但是新的问题来了，数据现在是写死的，我不可能每次手动改，所以就要想办法把数据通过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'])
}

实现效果

Django结合Echarts在前端展示数据

结尾

视图函数完整代码：

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在前端展示数据全部内容，希望文章能够帮你解决Django结合Echarts在前端展示数据所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的心得技巧相关文章
其他相关热搜词更多
微信小程序PHPVueVue.jsPythonPython3SQLJSJavaScriptCSSCSS3Web前端C++C语言HTMLJavaTypeScriptes6鸿蒙OS
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程