质量看板开发实践(四)：按照bug优先级、状态绘制饼图
作者：互联网
上一篇完成了按照日期范围查询bug的柱状图，本篇承接前面的内容，绘制2个柱状图，分别按照bug优先级和bug状态进行统计
效果如下
1、前端代码
先来编写echarts相关代码
新建文件base_pie.vue
<template>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: "base_pie",
methods: {
base_bug_pie(datasource, id) {
var chartDom = document.getElementById(id);
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: 'bottom'
},
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], //['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'],
series: [
{
type: 'pie',
radius: '70%',
data: datasource,
center: ['50%','45%'],
label: {
position: 'outer',
alignTo: 'labelLine',
bleedMargin: 5
},
emphasis: {
itemStyle: {
shadowBlur: 5,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style scoped>
</style>
定义一个饼图方法base_bug_pie()，我打算2个饼图共用这一个方法，所以这个方法中添加了2个参数：一个数据源、一个标签id属性，到时候调用这个方法时，可以根据传入的id值来判断渲染到哪个div容器
2、后端代码
上一篇中，我们创建了一个文件jira_data.py，里面定义的方法get_bug()已经包含了按照bug优先级、按bug状态统计的代码逻辑
def get_bug(self, project, start_date, end_date, class_type):
"""
以时间维度获取项目的bug信息
:param project:
:param start_date:
:param end_date:
:param class_type:
:return:
"""
try:
jql = "project in ({}) AND issuetype = 缺陷 AND created >= {} AND created <= {}".format(project, start_date,
end_date)
print("打印正在执行的jql：", jql)
issues = self.jira.search_issues(jql, fields="summary, priority, status, creator, created, customfield_11200", maxResults=-1)
result = []
for i in issues:
# print(type(i.fields.status))
# result.append(i.fields.status)
# print(i.raw["fields"]["priority"]["name"])
# print(i.raw["fields"]["status"]["name"])
# print(i.raw["fields"]["created"])
if class_type == "priority": # 按优先级统计
result.append(i.raw["fields"]["priority"]["name"])
elif class_type == "status": # 按bug状态统计
result.append(i.raw["fields"]["status"]["name"])
elif class_type == "created": # 按创建日期统计
result.append(i.raw["fields"]["created"].split("T")[0])
# print(result)
temp = Counter(result) # 汇总每个级别的数量
# print(temp)
# print(temp["中"])
# print(dict(temp)) # 使用dict方法将结果转为字典
temp_sum = sum(temp.values()) # 对temp中的value求和
# print(temp_sum)
bug_data = dict(temp)
# print(bug_data) # 形式 {'中': 164, '低': 74, '建议': 9, '最高': 4, '高': 34}
res = {
"bug_data": bug_data,
"sum": temp_sum
}
return res
except Exception as e:
raise e
然后在视图函数jira_data_vuews.py中分别传入不同的class_type即可获取对应的数据
例如在bug_day_data()方法中
class JiraSprintData:
def __init__(self):
self.jira = JiraData()
self.jira_sprint = JiraSprint()
self.pie_bug_priority_temp = {"最高": 0, "高": 0, "中": 0, "低": 0, "建议": 0}
self.pie_bug_status_temp = {"待处理": 0, "推迟修复": 0, "拒绝": 0, "正在处理": 0, "待测试验证": 0, "已关闭": 0, "重新打开": 0}
def bug_day_data(request):
"""
柱状图，按照日期范围查询
:param request:
:return:
"""
sd = JiraSprintData()
project = request.GET.get("project")
start_date = request.GET.get("start_date")
end_date = request.GET.get("end_date")
# 从jira查到的日期-bug列表
bug = sd.jira.get_bug(project=project, start_date=start_date, end_date=end_date, class_type="created")
# 按照优先级获取bug
pie_bug_priority = sd.jira.get_bug(project=project, start_date=start_date, end_date=end_date, class_type="priority")["bug_data"]
# 把字典数据转为饼图所需的数据格式 {'key': value, 'key': value} -- [{'key': value, 'key': 'value'}, {'key': value, 'key': 'value'}]
sd.pie_bug_priority_temp.update(pie_bug_priority)
pie_bug_priority_list = sd.jira.data_to_pie(sd.pie_bug_priority_temp)
# 按照状态获取bug
pie_bug_status = sd.jira.get_bug(project=project, start_date=start_date, end_date=end_date, class_type="status")["bug_data"]
# print(pie_bug_status)
sd.pie_bug_status_temp.update(pie_bug_status)
pie_bug_status_list = sd.jira.data_to_pie(sd.pie_bug_status_temp)
# print(pie_bug_status_list)
# print(bug)
# print(type(start_date))
start_date_to_datetime = datetime.datetime.strptime(start_date, "%Y-%m-%d") # 把从前端获取的起始月份转为datetime对象
end_date_to_datetime = datetime.datetime.strptime(end_date, "%Y-%m-%d")
# print(start_date_to_datetime)
date_poor = (end_date_to_datetime - start_date_to_datetime).days # 计算收尾日期差
# print(date_poor)
dates = [] # 定义一个日期范围列表
for i in range(date_poor + 1):
temp = start_date_to_datetime + datetime.timedelta(days=i) # 从起始日期开始，依次把日期追加到列表中
dates.append(temp.strftime("%Y-%m-%d"))
# print(dates)
result = [] # 定义一个最终结果列表
for j in dates: # 遍历日期范围列表
if j in bug["bug_data"]:
# 如果一个日期在bug列表中，说明这个日期有值，取bug字典中该日期的值赋给bug_num,同时date取当前日期，组合为一个字典
result.append({"date": j, "bug_num": bug["bug_data"][j]})
else:
# 否则这个日期对应的bug_num=0
result.append({"date": j, "bug_num": 0})
# print(result)
res = {
"code": "200",
"bug_data": result,
"pie_bug_priority_list": pie_bug_priority_list,
"pie_bug_status_list": pie_bug_status_list,
"sum": bug["sum"]
}
return JsonResponse(res, json_dumps_params={'ensure_ascii': False})
在返回结果中添加饼图数据：pie_bug_priority_list和pie_bug_status_list
3、前端代码修改：获取饼图数据
首先把base_pie.vue组件导入到jira_data.vue中
import BasePie from './base_pie.vue'
export default {
components: {
Histogram,
BasePie
},
定义饼状图显示区域，并声明组件
<div>
<div>
<div>
<div style="padding-bottom: 20px;width: 49%; float: left; height:400px;display:flex;justify-content:center">
<div class="little_title" style="width: 10%;float: left;"><span class="text">按照</span>优先级<span class="text">汇总</span></div>
<div id="pie_bug_priority" style="width: 80%;float: left;"></div>
</div>
<div style="padding-bottom: 20px;width: 49%; float: left; height:400px;display:flex;justify-content:center">
<div class="little_title" style="width: 10%;float: left;"><span class="text">按照</span>状态<span class="text">汇总</span></div>
<div id="pie_bug_status" style="width: 80%;float: left;"></div>
</div>
</div>
</div>
<BasePie ref="base_pie"></BasePie>
修改get_histogram()方法，在里面调用base_bug_pie方法
传入了数据源和div的id属性
this.$refs.base_pie.base_bug_pie(response.data.pie_bug_priority_list, "pie_bug_priority") // console.log(response.data.pie_bug_status_list) this.$refs.base_pie.base_bug_pie(response.data.pie_bug_status_list, "pie_bug_status")
标签：status,优先级,data,pie,start,date,绘制,bug 来源： https://www.cnblogs.com/hanmk/p/16117640.html