Django结合Echarts在前端展示数据
前言
最近在用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在前端展示数据的更多相关文章
- webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- 巨蟒django之权限9:前端展示修改删除合并&&权限展示
1.权限组件控制流程(硬核重点) 2.权限组件控制流程 3.角色管理 4.删除合并 5.权限展示
- flask+layui+echarts实现前端动态图展示数据
效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https: ...
- django+xadmin+echarts实现数据可视化
使用xadmin后功能比较强大,在后台展示统计图表,这个需求真的有点烫手,最终实现效果如下图: xadmin后台与echarts完全融合遇到以下问题: 1.没有现成的数据model 2.获得指定时间段 ...
- 使用echarts开发电子屏数据展示页面
背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...
- echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- echarts.js多图表数据展示使用小结
echarts api文档: http://echarts.baidu.com/echarts2/doc/doc.html echarts demo示例: http://echarts.baidu.c ...
- Python Django 前后端数据交互 之 后端向前端发送数据
Django 前后台的数据传递 严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...
- [py]access日志入mysql-通过flask前端展示
目录 pymysql组装sql入库日志 代码组织 将入库的日志通过flask前端展示 pymysql组装sql入库日志 pymysql模块的用法 采集这些指标(metirc)都是linux环境,会用到 ...
随机推荐
- 2021.6.17考试总结[NOIP模拟8]
T1 星际旅行 其实就是求两条只走一遍的边的方案数. 考场上第一眼就感觉不可做,后来画了几个图,发现好像只要两个边是相连的就可以只走一遍,居然还真拿了30.. 其实是一道欧拉路的题,把每条非自环的边看 ...
- 在Ubuntu下安装Solr
使用wget命令去官网下载solr的压缩包. 1 wget https://mirrors.bfsu.edu.cn/apache/lucene/solr/8.6.3/solr-8.6.3.tgz 使用 ...
- hdu 5057 Argestes and Sequence (数状数组+离线处理)
题意: 给N个数.a[1]....a[N]. M种操作: S X Y:令a[X]=Y Q L R D P:查询a[L]...a[R]中满足第D位上数字为P的数的个数 数据范围: 1<=T< ...
- Linux网卡bond模式
Bond模式 交换机配置 mode=0 balance-rr 轮询均衡模式 LACP mode on 强制链路聚合 mode=1 active-backup 主备模式 无 mode=2 balance ...
- 【数据结构&算法】08-栈概念&源码
目录 前言 栈的定义 定义 常见应用 栈的常见应用 进栈出栈变化形式 栈的抽象数据类型 栈的顺序存储结构及实现 栈的顺序存储结构 顺序栈 顺序栈的结构定义 两栈共享空间 栈的链式存储结构及实现 栈的链 ...
- HashSet的remove方法（一道面试题）
1 public class CollectionTest { 2 3 @Test 4 public void test3(){ 5 HashSet set = new HashSet(); 6 Pe ...
- float32 和 float64
float32 和 float64 Go语言中提供了两种精度的浮点数 float32 和 float64. float32,也即我们常说的单精度,存储占用4个字节,也即4*8=32位,其中1位用来符号 ...
- spring security 之自定义表单登录源码跟踪
上一节我们跟踪了security的默认登录页的源码,可以参考这里:https://www.cnblogs.com/process-h/p/15522267.html 这节我们来看看如何自定义单表认 ...
- Java线程状态及同步锁
线程的生命历程 线程的五大状态 创建状态:简而言之,当创建线程对象的代码出现的时候,此时线程就进入了创建状态.这时候的线程只是行代码而已.只有调用线程的start()方法时,线程的状态才会改变,进入就 ...
- Java学习（十九）
先学了字体分类 大概是这种效果: 一般把这些大类放在font-family的最后使用,防止字体呈现的效果不够好. 今天把final关键字学完了 也要几点要注意,我觉得比较重要的就是public sta ...