质量看板开发实践(四)：按照bug优先级、状态绘制饼图

冰霜

修改于 2022-05-01 09:58:42

4900

修改于 2022-05-01 09:58:42

文章被收录于专栏：冰霜的软件测试技术分享冰霜的软件测试技术分享

上一篇完成了按照日期范围查询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")

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-04-10，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法