From be759cc69de1fa57d9c3b5831e833a90609f23d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E5=8F=B6?= <yerz@shengshi.com.cn>
Date: Wed, 23 Nov 2022 11:53:13 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=82=E7=9C=8B=E4=B8=8B=E5=8D=95=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1=E6=8A=98=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/sylive/activity/index.js              | 14 +++
 .../statistics/components/area-table.vue      |  4 +-
 .../components/watchOrder-linechart.vue       | 93 +++++++++++++++++++
 .../sylive/activity/statistics/index.vue      | 10 +-
 4 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 src/views/sylive/activity/statistics/components/watchOrder-linechart.vue

diff --git a/src/api/sylive/activity/index.js b/src/api/sylive/activity/index.js
index b47bfd0..98913c0 100644
--- a/src/api/sylive/activity/index.js
+++ b/src/api/sylive/activity/index.js
@@ -307,3 +307,17 @@ export async function getStatisticsFunnel(params) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+/**
+ * 观看下单统计折线图
+ * @param params 查询条件
+ */
+export async function getStatisticsStackedWatchOrder(params) {
+  const res = await request.get('/sylive/statistics/stacked_watchOrder', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/views/sylive/activity/statistics/components/area-table.vue b/src/views/sylive/activity/statistics/components/area-table.vue
index d20e5fb..2e3b4b2 100644
--- a/src/views/sylive/activity/statistics/components/area-table.vue
+++ b/src/views/sylive/activity/statistics/components/area-table.vue
@@ -260,13 +260,13 @@
             },
             legend: {
               x: 'left',
-              padding: [15, 260, 0, 40],
+              padding: [13, 260, 0, 40],
               data: res.legendData
             },
             grid: {
               left: '3%',
               right: '4%',
-              top: '14%',
+              top: res.legendData.length < 15 ? '14%' : '17%',
               bottom: '3%',
               containLabel: true
             },
diff --git a/src/views/sylive/activity/statistics/components/watchOrder-linechart.vue b/src/views/sylive/activity/statistics/components/watchOrder-linechart.vue
new file mode 100644
index 0000000..933fe67
--- /dev/null
+++ b/src/views/sylive/activity/statistics/components/watchOrder-linechart.vue
@@ -0,0 +1,93 @@
+<template>
+  <el-card shadow="never" v-if="watchOrderOption.legend.data.length > 0">
+    <div>
+      <v-chart
+        ref="watchOrder"
+        style="width: 100%; height: 500px"
+        :option="watchOrderOption"
+      />
+    </div>
+  </el-card>
+</template>
+
+<script>
+  import { getStatisticsStackedWatchOrder } from '@/api/sylive/activity';
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { LineChart } from 'echarts/charts';
+  import {
+    LegendComponent,
+    GridComponent,
+    ToolboxComponent,
+    TooltipComponent
+  } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import 'echarts-wordcloud';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+  use([
+    CanvasRenderer,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    ToolboxComponent,
+    LineChart
+  ]);
+
+  export default {
+    components: { VChart },
+    mixins: [echartsMixin(['watchOrder'])],
+    data() {
+      return {
+        watchOrderOption: {
+          legend: {
+            data: []
+          }
+        } //折线图
+      };
+    },
+    created() {
+      this.getStatisticsStackedWatchOrder();
+    },
+    methods: {
+      //区域统计折线图
+      getStatisticsStackedWatchOrder() {
+        const activityId = this.$route.query.id;
+        getStatisticsStackedWatchOrder({
+          activityId
+        }).then((res) => {
+          console.log(res);
+          this.watchOrderOption = {
+            tooltip: {
+              trigger: 'axis'
+            },
+            legend: {
+              padding: [13, 260, 0, 40],
+              data: res.legendData
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              top: '10%',
+              bottom: '3%',
+              containLabel: true
+            },
+            toolbox: {
+              feature: {
+                saveAsImage: {}
+              }
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data: res.xAxisData
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: res.yAxisSeries
+          };
+        });
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/activity/statistics/index.vue b/src/views/sylive/activity/statistics/index.vue
index 6c7b585..16afe67 100644
--- a/src/views/sylive/activity/statistics/index.vue
+++ b/src/views/sylive/activity/statistics/index.vue
@@ -124,6 +124,7 @@
         </el-card>
       </el-col>
     </el-row>
+    <watchOrderLinechart />
     <el-card
       shadow="never"
       header="浏览人数排名"
@@ -437,12 +438,19 @@
   import AreaTable from './components/area-table.vue';
   import BizTable from './components/biz-table.vue';
   import ConsultantTable from './components/consultant-table.vue';
+  import watchOrderLinechart from './components/watchOrder-linechart.vue';
 
   use([CanvasRenderer, TooltipComponent, FunnelChart]);
 
   export default {
     name: 'SyliveActivityStatistics',
-    components: { VChart, AreaTable, BizTable, ConsultantTable },
+    components: {
+      VChart,
+      AreaTable,
+      BizTable,
+      ConsultantTable,
+      watchOrderLinechart
+    },
     mixins: [echartsMixin(['funnelChart'])],
     data() {
       return {