数据统计刷新4

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>

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 {

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: {