所属需求方向分布图

src/api/statisticsApi/requireStatistics.js

@@ -1,6 +1,14 @@
 import request from '@/utils/request'
 import { TeamManagement } from '@/apiConfig/api'
 
+// 需求方向分布图
+export function getOrntDistributeData(data) {
+  return request({
+    url: TeamManagement + '/requirement/getOrntDistributeData',
+    method: 'post',
+    data
+  })
+}
 // 需求分布图
 export function getDistributeData(data) {
   return request({

src/views/quality/components/belongChart.vue

@@ -0,0 +1,113 @@
+<template>
+  <section>
+    <div class="control">
+      <el-row type="flex" align="middle">
+        <el-col :span="4" :offset="20" class="col-flex-end">
+          <div class="bar-pie" :class="[barOrPie==='bar'?'active':'']" @click="changeBarOrPie('bar')">柱状图</div>
+          <div class="bar-pie" :class="[barOrPie==='pie'?'active':'']" @click="changeBarOrPie('pie')">饼图</div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="chart-contain">
+      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" />
+    </div>
+  </section>
+</template>
+<script>
+import normalEchart from '@/components/chart/normalEchart'
+export default {
+  components: { normalEchart },
+  props: {
+    id: {
+      type: String,
+      default: 'belong-chart',
+      required: false
+    },
+    chartData: {
+      type: Object,
+      default: () => null,
+      required: false
+    }
+  },
+  data() {
+    return {
+      echartsOption: null,
+      barOrPie: 'bar' // 柱状图or饼图
+    }
+  },
+  watch: {
+    chartData: {
+      handler(newV) {
+        this.changeBarOrPie(this.barOrPie)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    changeBarOrPie(type) { // 饼图柱状图切换
+      this.barOrPie = type
+      if (!this.chartData) return
+      if (type === 'bar') {
+        this.echartsOption = {
+          color: ['#3AA1FF'],
+          tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
+          grid: { left: '0', right: '0', top: '10%', bottom: '0', containLabel: true },
+          xAxis: [{ type: 'category', data: this.chartData.xaxis, axisLabel: { interval: 0, rotate: 0 }, axisTick: { alignWithLabel: true }}],
+          yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
+          series: [{
+            name: '数量', type: 'bar', barWidth: '20px', data: this.chartData.yaxis[0] && this.chartData.yaxis[0].data || [],
+            itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
+          }]
+        }
+      } else {
+        const newArr = this.chartData.xaxis.map((item, index) => {
+          return {
+            value: this.chartData.yaxis[0] && this.chartData.yaxis[0].data[index] || null,
+            name: item
+          }
+        })
+        this.echartsOption = {
+          color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'],
+          grid: { left: '0', right: '0', top: '5%', bottom: '0' },
+          tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
+          legend: { orient: 'vertical', left: 'right', top: 'center', data: this.chartData.xaxis },
+          series: [{
+            name: '数量', type: 'pie', radius: ['45%', '60%'], right: '30%', label: { position: 'outer', alignTo: 'edge', margin: 20 }, data: newArr,
+            itemStyle: { normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: { show: true }}}
+          }]
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.chart-contain {
+  position: relative;
+  height: 400px;
+  width: 84%;
+  margin: 20px auto;
+}
+.control{
+  width: 84%;
+  margin: auto;
+  margin-top: 20px;
+}
+.bar-pie {
+  font-size: 14px;
+  width: 40%;
+  display: inline-block;
+  padding: 6px 10px;
+  margin-left: 5%;
+  color: #50A6FF;
+  border: 1px solid #50A6FF;
+  border-radius: 4px;
+  text-align: center;
+  cursor: pointer;
+}
+.active {
+  color: #ffffff;
+  background: #50A6FF;
+}
+</style>

src/views/quality/requireStatistics.vue

@@ -113,6 +113,10 @@
         <h3>新增趋势图</h3>
         <tendency-chart :chart-data="tendencyData" />
       </div>
+      <div class="chart-item">
+        <h3>所属需求方向分布图</h3>
+        <belong-chart :chart-data="orntDistributeData" />
+      </div>
       <div class="chart-item">
         <h3>周期统计<span>（根据排期计算）</span></h3>
         <div class="chart-item-tip">
@@ -156,15 +160,24 @@ import {
 } from '@/api/defectStatistics'
 import {
   getDistributeData,
-  getStatusStayData
+  getStatusStayData,
+  getOrntDistributeData
 } from '@/api/statisticsApi/requireStatistics'
 import statusChart from './components/statusChart'
 import tendencyChart from './components/tendencyChart'
 import cycleStatistic from './components/cycleStatistic'
 import distributionChart from './components/distributionChart'
 import statusStayChart from './components/statusStayChart'
+import belongChart from './components/belongChart'
 export default {
-  components: { statusChart, tendencyChart, cycleStatistic, distributionChart, statusStayChart },
+  components: {
+    statusChart,
+    tendencyChart,
+    cycleStatistic,
+    distributionChart,
+    statusStayChart,
+    belongChart
+  },
   data() {
     return {
       bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
@@ -190,6 +203,7 @@ export default {
         { code: 4, label: 'pm' },
         { code: 5, label: '跟版客户端' }
       ], // 需求分布图需求状态列表
+      orntDistributeData: null, // 所属需求方向数据
       distributeData: null, // 需求分布图数据
       statusStayData: null // 状态停留图数据
     }
@@ -224,6 +238,7 @@ export default {
       this.getSummary()
       this.defectTrendTimeChange()
       this.getCycleData()
+      this.getOrntDistributeData()
       this.getDistributeData()
       this.getStatusStayData()
     },
@@ -311,6 +326,19 @@ export default {
       }
       const res = await getStatusStayData(params)
       if (res.code === 200) this.statusStayData = res.data
+    },
+    async getOrntDistributeData() { // 获取需求方向分布
+      const params = {
+        ...this.globalParams,
+        type: Number(this.activeTab)
+      }
+      const res = await getOrntDistributeData(params)
+      if (res.code === 200) {
+        this.orntDistributeData = {
+          xaxis: res.data.map(item => item.name),
+          yaxis: [{ data: res.data.map(item => item.count) }]
+        }
+      }
     }
   }
 }
@@ -451,6 +479,7 @@ export default {
   }
   .chart-item-tip {
     margin-top: 12px;
+    margin-bottom: 10px;
     font-size: 12px;
     color: #E6A23C;
   }