观看下单统计折线图

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));
+}

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
             },

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>

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 {