状态积累流量图

src/views/quality/components/statusChart.vue

@@ -23,6 +23,11 @@ export default {
       type: Object,
       default: () => null,
       required: false
+    },
+    timeType: {
+      type: String,
+      default: 'week',
+      required: false
     }
   },
   data() {
@@ -31,6 +36,27 @@ export default {
       pileOrLine: 'pile' // 图的类型，pile：堆叠面积图，line：折线图
     }
   },
+  computed: {
+    seriesData: {
+      get() {
+        if (!this.chartData) return []
+        const newArr = []
+        Object.entries(this.chartData).forEach(values => {
+          const item = {
+            name: values[0],
+            type: 'line',
+            smooth: 0.5,
+            stack: '总量',
+            areaStyle: {},
+            data: values[1].map(item => item.count),
+            dayTime: values[1].map(item => item.label)
+          }
+          newArr.push(item)
+        })
+        return newArr
+      }
+    }
+  },
   watch: {
     chartData: {
       handler(newV) {
@@ -38,6 +64,12 @@ export default {
       },
       deep: true,
       immediate: true
+    },
+    timeType: {
+      handler(newV) {
+        this.timeType = newV
+      },
+      immediate: true
     }
   },
   mounted() {
@@ -52,6 +84,19 @@ export default {
         this.setLine()
       }
     },
+    handlerXdata(arr) {
+      if (!this.seriesData[0]) return []
+      let newArr = []
+      if (this.seriesData[0].dayTime <= 12) {
+        newArr = this.seriesData[0].dayTime
+      } else {
+        const gap = Math.floor(this.seriesData[0].dayTime.length / 12)
+        newArr = this.seriesData[0].dayTime.filter((item, index) => {
+          return index % gap === 0
+        })
+      }
+      return newArr
+    },
     setPile() {
       this.echartsOption = {
         tooltip: {
@@ -64,7 +109,7 @@ export default {
           }
         },
         legend: {
-          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+          data: this.seriesData.map(item => item.name),
           left: '0%'
         },
         grid: { left: '0%', right: '0%', bottom: '0%', top: '10%', containLabel: true },
@@ -72,53 +117,11 @@ export default {
           {
             type: 'category',
             boundaryGap: false,
-            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+            data: this.handlerXdata(this.seriesData)
           }
         ],
         yAxis: [{ type: 'value' }],
-        series: [
-          {
-            name: '邮件营销',
-            type: 'line',
-            smooth: 0.5,
-            stack: '总量',
-            areaStyle: {},
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '联盟广告',
-            type: 'line',
-            smooth: 0.5,
-            stack: '总量',
-            areaStyle: {},
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: '视频广告',
-            type: 'line',
-            smooth: 0.5,
-            stack: '总量',
-            areaStyle: {},
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: '直接访问',
-            type: 'line',
-            smooth: 0.5,
-            stack: '总量',
-            areaStyle: {},
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: '搜索引擎',
-            type: 'line',
-            smooth: 0.5,
-            stack: '总量',
-            label: { normal: { show: true, position: 'top' }},
-            areaStyle: {},
-            data: [820, 932, 901, 934, 1290, 1330, 1320]
-          }
-        ]
+        series: this.seriesData
       }
     },
     setLine() {
@@ -133,7 +136,7 @@ export default {
           }
         },
         legend: {
-          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+          data: this.seriesData.map(item => item.name),
           left: '0%'
         },
         grid: { left: '0%', right: '0%', bottom: '0%', top: '10%', containLabel: true },
@@ -141,43 +144,16 @@ export default {
           {
             type: 'category',
             boundaryGap: false,
-            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+            data: this.handlerXdata(this.seriesData)
           }
         ],
         yAxis: [{ type: 'value' }],
-        series: [
-          {
-            name: '邮件营销',
-            type: 'line',
-            stack: '总量',
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: '联盟广告',
-            type: 'line',
-            stack: '总量',
-            data: [220, 182, 191, 234, 290, 330, 310]
-          },
-          {
-            name: '视频广告',
-            type: 'line',
-            stack: '总量',
-            data: [150, 232, 201, 154, 190, 330, 410]
-          },
-          {
-            name: '直接访问',
-            type: 'line',
-            stack: '总量',
-            data: [320, 332, 301, 334, 390, 330, 320]
-          },
-          {
-            name: '搜索引擎',
-            type: 'line',
-            stack: '总量',
-            label: { normal: { show: true, position: 'top' }},
-            data: [820, 932, 901, 934, 1290, 1330, 1320]
+        series: this.seriesData.map(item => {
+          return {
+            ...item,
+            areaStyle: null
           }
-        ]
+        })
       }
     }
   }

src/views/quality/requireStatistics.vue

@@ -292,7 +292,6 @@ export default {
     async getSummary() { // 获取顶部数据
       const res = await getSummary(this.globalParams)
       if (res.code === 200) this.Summary = res.data || []
-      console.log(res.data)
     },
     async defectTrendTimeChange() { // 趋势图日期变动
       const rqmtOrntIds = this.chartForm.rqmtOrntIds
@@ -319,6 +318,9 @@ export default {
         case 'year':
           timeType = 3
           break
+        default:
+          timeType = 0
+          break
       }
       const params = {
         ...this.globalParams,