質量看板開發實踐(四)：按照bug優先順序、狀態繪製餅圖
阿新 • • 發佈：2022-04-08
上一篇完成了按照日期範圍查詢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")