区域统计折线图

src/api/sylive/activity/index.js

@@ -168,6 +168,20 @@ export async function pageStatisticsArea(params) {
   return Promise.reject(new Error(res.data.message));
 }
 
+/**
+ * 区域统计折线图
+ * @param params 查询条件
+ */
+export async function getStatisticsStackedArea(params) {
+  const res = await request.get('/sylive/statistics/stacked_area', {
+    params
+  });
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
 /**
  * 分页查询门店统计
  * @param params 查询条件

src/views/sylive/activity/statistics/components/area-table.vue

@@ -47,42 +47,71 @@
         </div>
       </template>
     </ele-pro-table>
-    <!-- <div style="margin-top: 40px" v-if="areaChartOption.legend.data.length > 0">
+    <div
+      style="position: relative; margin-top: 40px"
+      v-if="areaChartOption.legend.data.length > 0"
+    >
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          right: 40px;
+          width: 200px;
+          z-index: 1;
+        "
+      >
+        <el-select
+          class="ele-fluid"
+          v-model="tempkpi"
+          placeholder="请选择"
+          @change="changeKpi($event)"
+        >
+          <el-option
+            v-for="(option, index) in kpioption"
+            :key="index"
+            :value="option.kpi"
+            :label="option.title"
+          />
+        </el-select>
+      </div>
       <v-chart
         ref="areaChart"
         style="width: 100%; height: 500px"
         :option="areaChartOption"
       />
-    </div> -->
+    </div>
   </el-card>
 </template>
 
 <script>
-  import { pageStatisticsArea } 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
-  // ]);
+  import {
+    pageStatisticsArea,
+    getStatisticsStackedArea
+  } 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(['areaChart'])],
+    components: { VChart },
+    mixins: [echartsMixin(['areaChart'])],
     props: { data: { days: [], goods: [] } },
     data() {
       return {
@@ -166,14 +195,29 @@
             showOverflowTooltip: true,
             minWidth: 110
           }
-        ]
-        // areaChartOption: {
-        //   legend: {
-        //     data: []
-        //   }
-        // } //折线图
+        ],
+        kpi: 'browse',
+        tempkpi: 'browse',
+        kpioption: [
+          {
+            kpi: 'browse',
+            title: '浏览数'
+          },
+          {
+            kpi: 'subscribe',
+            title: '预约数'
+          }
+        ],
+        areaChartOption: {
+          legend: {
+            data: []
+          }
+        } //折线图
       };
     },
+    created() {
+      this.getStatisticsStackedArea();
+    },
     methods: {
       /* 表格数据源 */
       datasource({ page, limit, order }) {
@@ -183,45 +227,6 @@
         }
         const day = this.day;
         const itemId = this.itemId;
-        //更新折线图
-        // pageStatisticsArea({
-        //   ...order,
-        //   page,
-        //   limit,
-        //   activityId,
-        //   day,
-        //   itemId
-        // }).then((res) => {
-        //   this.areaChartOption = {
-        //     tooltip: {
-        //       trigger: 'axis'
-        //     },
-        //     legend: {
-        //       data: res.chart.legendData
-        //     },
-        //     grid: {
-        //       left: '3%',
-        //       right: '4%',
-        //       top: '12%',
-        //       bottom: '3%',
-        //       containLabel: true
-        //     },
-        //     toolbox: {
-        //       feature: {
-        //         saveAsImage: {}
-        //       }
-        //     },
-        //     xAxis: {
-        //       type: 'category',
-        //       boundaryGap: false,
-        //       data: res.chart.xAxisData
-        //     },
-        //     yAxis: {
-        //       type: 'value'
-        //     },
-        //     series: res.chart.yAxisSeries
-        //   };
-        // });
         return pageStatisticsArea({
           ...order,
           page,
@@ -232,6 +237,56 @@
         });
       },
 
+      //切换区域统计折线图
+      changeKpi(value) {
+        if (value != this.kpi) {
+          this.kpi = value;
+          this.getStatisticsStackedArea();
+        }
+      },
+
+      //区域统计折线图
+      getStatisticsStackedArea() {
+        const activityId = this.$route.query.id;
+        let kpi = this.kpi;
+        getStatisticsStackedArea({
+          activityId,
+          kpi
+        }).then((res) => {
+          this.areaChartOption = {
+            tooltip: {
+              trigger: 'axis'
+            },
+            legend: {
+              x: 'left',
+              padding: [15, 260, 0, 40],
+              data: res.legendData
+            },
+            grid: {
+              left: '3%',
+              right: '4%',
+              top: '14%',
+              bottom: '3%',
+              containLabel: true
+            },
+            toolbox: {
+              feature: {
+                saveAsImage: {}
+              }
+            },
+            xAxis: {
+              type: 'category',
+              boundaryGap: false,
+              data: res.xAxisData
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: res.yAxisSeries
+          };
+        });
+      },
+
       /* 更新选中数据 */
       updateValue() {
         this.$refs.table.reload({ page: 1 });