didi 4 年之前
父節點
當前提交
1f82a44869
共有 2 個文件被更改,包括 39 次插入21 次删除
  1. 22 10
      src/components/chart/statusStayChart.vue
  2. 17 11
      src/views/workbench/components/statisticsSection.vue

+ 22 - 10
src/components/chart/statusStayChart.vue

@@ -1,7 +1,7 @@
 <template>
 <template>
   <section>
   <section>
     <div class="chart-contain">
     <div class="chart-contain">
-      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" />
+      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" @onClick="chartClick" />
     </div>
     </div>
   </section>
   </section>
 </template>
 </template>
@@ -38,16 +38,25 @@ export default {
   methods: {
   methods: {
     setChart() {
     setChart() {
       if (!this.chartData) return
       if (!this.chartData) return
-      // console.log(111, this.chartData)
-      // this.chartData.yaxis = [
-      //   {
-      //     data: [1],
-      //     idList: [[1705]],
-      //     name: null
-      //   }
-      // ]
       const newArr = this.chartData.yaxis.filter(item => { return item.name !== '全部' })
       const newArr = this.chartData.yaxis.filter(item => { return item.name !== '全部' })
       const colorArr = ['#409EFF', '#F8CE5C', '#F2904F', '#5EE2BE', '#D873F5', '#7479F5']
       const colorArr = ['#409EFF', '#F8CE5C', '#F2904F', '#5EE2BE', '#D873F5', '#7479F5']
+      let series = null
+      if (this.chartData.type === '0') {
+        const childArr = this.chartData.xaxis.map((item, index) => {
+          return {
+            value: this.chartData.yaxis[0]?.data[index] || 0,
+            idList: this.chartData.yaxis[0]?.idList[index] || []
+          }
+        })
+        series = [{
+          name: '数量', type: 'bar', barWidth: '20px', data: childArr,
+          itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
+        }]
+      } else {
+        series = newArr.map(item => (
+          { ...item, type: 'bar', stack: '总和', barWidth: '20px' }
+        ))
+      }
       this.echartsOption = {
       this.echartsOption = {
         color: colorArr,
         color: colorArr,
         tooltip: {
         tooltip: {
@@ -67,8 +76,11 @@ export default {
         grid: { left: '0', right: '0', top: '8%', bottom: '0', containLabel: true },
         grid: { left: '0', right: '0', top: '8%', bottom: '0', containLabel: true },
         xAxis: { type: 'category', data: this.chartData.xaxis, axisTick: { alignWithLabel: true }, axisLabel: { interval: 0, rotate: 40 }},
         xAxis: { type: 'category', data: this.chartData.xaxis, axisTick: { alignWithLabel: true }, axisLabel: { interval: 0, rotate: 40 }},
         yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}, axisLabel: { formatter: '{value}个' }},
         yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}, axisLabel: { formatter: '{value}个' }},
-        series: newArr.map(item => ({ ...item, type: 'bar', stack: '总和', barWidth: '20px' }))
+        series
       }
       }
+    },
+    chartClick(param) {
+      this.$emit('onClick', param)
     }
     }
   }
   }
 }
 }

+ 17 - 11
src/views/workbench/components/statisticsSection.vue

@@ -104,7 +104,7 @@ export default {
       echartsOption2: null,
       echartsOption2: null,
       totalTask: 0, // 所有总数
       totalTask: 0, // 所有总数
       totalIdList: 0, // 所有总数的idList
       totalIdList: 0, // 所有总数的idList
-      itemType: 0, // 0: 未上线的需求分布  1: 本周状态流入图
+      itemType: '0', // 0: 未上线的需求分布  1: 本周状态流入图
       tips: {
       tips: {
         '需求': [
         '需求': [
           '交付日期为今天,且状态仍未变更为“已上线”的需求数量(不包含当前状态为hold的需求)。',
           '交付日期为今天,且状态仍未变更为“已上线”的需求数量(不包含当前状态为hold的需求)。',
@@ -158,7 +158,6 @@ export default {
       }
       }
     },
     },
     onChangeTagRadio(e) {
     onChangeTagRadio(e) {
-      console.log(e)
       const { requestChart } = this.requestObj
       const { requestChart } = this.requestObj
       this.getChart(requestChart, this.itemType)
       this.getChart(requestChart, this.itemType)
     },
     },
@@ -180,18 +179,16 @@ export default {
       }
       }
     },
     },
     async getChart(requestUrl, type) { // 获取图表数据
     async getChart(requestUrl, type) { // 获取图表数据
-      if (type) {
-        const res = await requestUrl({ teamSearchInfo: this.searchForm, type: type })
-        if (type === '3') {
-          this.echartsOption = this.setChart(res.data)
-        } else if (type === '5') {
-          this.echartsOption2 = this.setChart(res.data)
-        }
+      const res = await requestUrl({ teamSearchInfo: this.searchForm, type: type })
+      if (type === '3') {
+        this.echartsOption = this.setChart(res.data)
+      } else if (type === '5') {
+        this.echartsOption2 = this.setChart(res.data)
       } else {
       } else {
         const res = await requestUrl({ teamSearchInfo: this.searchForm, type })
         const res = await requestUrl({ teamSearchInfo: this.searchForm, type })
         this.totalTask = res.data.total
         this.totalTask = res.data.total
         this.totalIdList = res.data.idList
         this.totalIdList = res.data.idList
-        this.echartsOption = res.data
+        this.echartsOption = { ...res.data, type: this.itemType }
       }
       }
     },
     },
     setChart(chartData) { // 设置图表options
     setChart(chartData) { // 设置图表options
@@ -219,8 +216,17 @@ export default {
       this.changeData(this.totalIdList, `未上线的`)
       this.changeData(this.totalIdList, `未上线的`)
     },
     },
     chartChange(params) { // 点击图表产生触发列表更改
     chartChange(params) { // 点击图表产生触发列表更改
+      let idList = params.data.idList || []
+      // 本周需求状态流入图需要特殊处理。循环出对应下标的idlist
+      if (this.itemType === '1') {
+        // console.log(this.echartsOption.xaxis)
+        const dataIndex = params.dataIndex
+        this.echartsOption.yaxis.forEach(t => {
+          idList = [...idList, ...t.idList[dataIndex]]
+        })
+      }
       this.clickItem = -1
       this.clickItem = -1
-      this.changeData(params.data.idList, params.name)
+      this.changeData(idList, params.name)
     },
     },
     changeData(idList, name) { // 点击顶部数据触发列表更改
     changeData(idList, name) { // 点击顶部数据触发列表更改
       this.$emit('change', this.title, idList, name)
       this.$emit('change', this.title, idList, name)