质量看板开发实践(七)：使用旭日图汇总每个人的故事点
想用一张图来展示一个冲刺中每个人分配的故事点数，而且能够按照前端、后端、测试等维度聚合，所以采用了旭日图
效果如下
echarts中关于旭日图的例子：https://echarts.apache.org/examples/zh/editor.html?c=sunburst-simple
下面来介绍下具体实现过程
首先来看下旭日图的数据结构
类似这种：父节点Grandpa，它下面有2个子节点Uncle Leo和Father，Uncle Leo下有3个子节点Cousin Jack、Cousin Mary、Cousin Ben
所以后端要构造出这种格式的数据
后端数据处理
可以从jira一个故事卡的原始数据中提取出 (前端工程师 and 前端故事点)、(后端工程师 and 后端故事点)、(测试负责人 and 测试故事点)
由于每个公司的jira版本不同，上述字段在自己当前jira中对应的字段属性不尽相同，需要自己从原始数据中找到对应字段名
下面是部分重点代码
def get_sprint(self, project, sprint): 获取每个冲刺的数据，例如冲刺标题、每个人的故事点数 :param project: :param sprint: :return: try: if sprint == or sprint is None: # 不传sprint会查询所有冲刺 jql = project in ({}) AND issuetype = Story.format(project) else: jql = project in ({}) AND issuetype = Story AND Sprint in ({}).format(project, sprint) print(****************** 打印jql ******************) print(正在执行的jql=, jql) fields = summary, priority, status, creator, created, customfield_12309, customfield_12307, \ customfield_12310, customfield_12308, customfield_12400,customfield_11303, customfield_10006 issues = self.jira.search_issues(jql, fields=fields, maxResults=-1) # 前端故事点：customfield_12309；后端故事点：customfield_12310；测试故事点：customfield_12400；预估总点数：customfield_10006 # 前端负责人：customfield_12307；后端负责人：customfield_12308；测试负责人：customfield_11303 front_points = [] # 前端故事点 fronter = [] # 故事对应的前端工程师 server_points = [] # 后端故事点 server = [] # 故事对应的后端工程师 test_points = [] # 测试故事点 tester = [] # 故事对应的测试工程师 for i in issues: # print(i.raw) # 打印每个故事的原始信息 # 前端故事点 if i.raw[fields][customfield_12309] is None: front_points.append(0) else: front_points.append(i.raw[fields][customfield_12309]) # 前端工程师 if i.raw[fields][customfield_12307] is None: fronter.append(未指派) else: fronter.append(i.raw[fields][customfield_12307][0][displayName].split(()[0]) # 后端故事点 if i.raw[fields][customfield_12310] is None: server_points.append(0) else: server_points.append(i.raw[fields][customfield_12310]) # 后端工程师 if i.raw[fields][customfield_12308] is None: server.append(未指派) else: server.append(i.raw[fields][customfield_12308][0][displayName].split(()[0]) # 测试故事点 if i.raw[fields][customfield_12400] is None: test_points.append(0) else: test_points.append(i.raw[fields][customfield_12400]) # 测试工程师 if i.raw[fields][customfield_11303] is None: tester.append(未指派) else: tester.append(i.raw[fields][customfield_11303][displayName].split(()[0]) # 提取名称，只保留中文 print(打印前端故事点：, front_points) print(打印前端工程师：, fronter) # print(打印后端故事点：, server_points) # print(打印后端工程师：, server) # print(打印测试故事点：, test_points) # print(打印测试工程师：, tester) # 对前端、后端、测试各自的故事点数，以负责人维度进行聚合 df1 = pd.DataFrame(data={'name': fronter, 'value': front_points}) # groupby()之后，使用sum对相同元素求和 <class 'pandas.core.frame.DataFrame'> front_group = df1.groupby('name', as_index=True).sum() # print(front_group) front_dict = front_group.to_dict()[value] front_list = self.data_to_pie(front_dict) # 前端故事点旭日图所需数据 print(打印前端故事点聚合数据, front_list) df2 = pd.DataFrame(data={'name': server, 'value': server_points}) server_group = df2.groupby('name', as_index=True).sum() server_dict = server_group.to_dict()[value] server_list = self.data_to_pie(server_dict) # 后端故事点旭日图所需数据 # print(打印后端故事点聚合数据, server_list) df3 = pd.DataFrame(data={'name': tester, 'value': test_points}) tester_group = df3.groupby('name', as_index=True).sum() tester_dict = tester_group.to_dict()[value] tester_list = self.data_to_pie(tester_dict) # 测试故事点旭日图所需数据 # print(打印测试故事点聚合数据, tester_list) points_total = sum(front_points + server_points + test_points) # 前后端、测试故事点总数 # print(打印故事点总数：, points_total) # 旭日图所需数据格式 story_points_list = [ { name: 前端, children: front_list }, { name: 后端, children: server_list }, { name: 测试, children: tester_list } ] res = { code: 200, points_total: points_total, story_points_list: story_points_list, } return res except Exception as e: raise e
以前端为例，分别打印 front_points、fronter、front_list
print(打印前端故事点：, front_points) print(打印前端工程师：, fronter) print(打印前端故事点聚合数据front_list, front_list)
结果如下：
打印前端故事点： [1.0, 2.0, 1.0, 1.0, 2.0, 2.0, 0, 0, 0, 1.0, 3.0, 1.0] 每个故事卡的前端故事点 打印前端工程师： ['张三', '张三', '张三', '张三', '张三', '李四', '未指派', '未指派', '未指派', '李四', '李四', '李四'] 每个故事卡对应的前端工程师 打印前端故事点聚合数据front_list [{'value': 0.0, 'name': '未指派'}, {'value': 7.0, 'name': '李四'}, {'value': 7.0, 'name': '张三'}] 聚合上面2个列表，得到这样一组聚合数据 借助pandas处理front_points和fronter可以得到front_list
具体用法可以查看之前的一篇博客：质量看板开发实践(三)：bug柱状图
同理可以得到后端工程师和测试负责人相关的数据，最后构造为旭日图所需的数据结构
# 旭日图所需数据格式 story_points_list = [ { name: 前端, children: front_list }, { name: 后端, children: server_list }, { name: 测试, children: tester_list } ] 前端处理
前端逻辑比较简单，只要把旭日图相关代码拿过来就好
<template> </template> <script> import * as echarts from 'echarts'; export default { name: sun_figure, methods: { story_sun(datasource, points) { let chartDom = document.getElementById('story_sun'); let myChart = echarts.init(chartDom); let option; option = { title: { text: '故事点汇总', top: '5%', // 距离顶部位置 left: 'center' }, tooltip: { trigger: 'item' }, color: ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'], graphic: { type: 'text', left: 80%, top: '50%', style: { text: '总数：' + points, textAlign: 'center', fill: '#333', fontSize: 15, fontWeight: 700 } }, series: { type: 'sunburst', // emphasis: { // focus: 'ancestor' // }, center:['50%', '53%'], //控制左右上下 data: datasource, radius: [0, '60%'], //控制大小 label: { rotate: 'radial' } } }; option && myChart.setOption(option); } } } </script> <style scoped> </style>