From c344a38b8bc57cd2b5abb8fa9cc4eb8b4e20605e Mon Sep 17 00:00:00 2001
From: dengbw <dengbw@shengshi.com.cn>
Date: Wed, 23 Nov 2022 16:43:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=BB=9F=E8=AE=A1=E5=88=B7?=
 =?UTF-8?q?=E6=96=B04?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/watchOrder-linechart.vue       | 104 ++++++++++++++++++
 .../sylive/activity/statistics-team/index.vue |   9 +-
 .../components/watchOrder-linechart.vue       |   4 +-
 3 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 src/views/sylive/activity/statistics-team/components/watchOrder-linechart.vue

diff --git a/src/views/sylive/activity/statistics-team/components/watchOrder-linechart.vue b/src/views/sylive/activity/statistics-team/components/watchOrder-linechart.vue
new file mode 100644
index 0000000..98e9cbf
--- /dev/null
+++ b/src/views/sylive/activity/statistics-team/components/watchOrder-linechart.vue
@@ -0,0 +1,104 @@
+<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: []
+          }
+        } //折线图
+      };
+    },
+    methods: {
+      //区域统计折线图
+      getStatisticsStackedWatchOrder() {
+        this.watchOrderOption = { legend: { data: [] } };
+        const activityId = this.$route.query.id;
+        const type = 1;
+        getStatisticsStackedWatchOrder({
+          activityId,
+          type
+        }).then((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
+          };
+        });
+      }
+    },
+    watch: {
+      $route: {
+        handler(route) {
+          const { path } = route;
+          if (path !== '/sylive/activity/statistics-team') {
+            return;
+          }
+          this.getStatisticsStackedWatchOrder();
+        },
+        immediate: true
+      }
+    }
+  };
+</script>
diff --git a/src/views/sylive/activity/statistics-team/index.vue b/src/views/sylive/activity/statistics-team/index.vue
index bd00d4c..d5c7c99 100644
--- a/src/views/sylive/activity/statistics-team/index.vue
+++ b/src/views/sylive/activity/statistics-team/index.vue
@@ -124,6 +124,7 @@
         </el-card>
       </el-col>
     </el-row>
+    <watchOrderLinechart />
     <el-card
       shadow="never"
       header="浏览人数排名"
@@ -355,12 +356,18 @@
   import { echartsMixin } from '@/utils/echarts-mixin';
   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: 'SyliveActivityStatisticsTeam',
-    components: { VChart, BizTable, ConsultantTable },
+    components: {
+      VChart,
+      BizTable,
+      ConsultantTable,
+      watchOrderLinechart
+    },
     mixins: [echartsMixin(['funnelChart'])],
     data() {
       return {
diff --git a/src/views/sylive/activity/statistics/components/watchOrder-linechart.vue b/src/views/sylive/activity/statistics/components/watchOrder-linechart.vue
index 59b6d45..96c8152 100644
--- a/src/views/sylive/activity/statistics/components/watchOrder-linechart.vue
+++ b/src/views/sylive/activity/statistics/components/watchOrder-linechart.vue
@@ -50,8 +50,10 @@
       getStatisticsStackedWatchOrder() {
         this.watchOrderOption = { legend: { data: [] } };
         const activityId = this.$route.query.id;
+        const type = 0;
         getStatisticsStackedWatchOrder({
-          activityId
+          activityId,
+          type
         }).then((res) => {
           this.watchOrderOption = {
             tooltip: {