From e79e65efcfa7dccc312f9ebe1595b3891dda0eb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E5=8F=B6?= <yerz@shengshi.com.cn>
Date: Sat, 8 Oct 2022 20:59:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BC=8F=E6=96=97=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sylive/activity/statistics/index.vue      | 75 ++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/views/sylive/activity/statistics/index.vue b/src/views/sylive/activity/statistics/index.vue
index 858eaa5..5304633 100644
--- a/src/views/sylive/activity/statistics/index.vue
+++ b/src/views/sylive/activity/statistics/index.vue
@@ -36,6 +36,15 @@
         </el-card>
       </el-col>
     </el-row>
+    <el-card shadow="never" header="活动漏斗">
+      <div style="width: 600px; margin: 0 auto">
+        <v-chart
+          ref="hotSearchChart"
+          style="width: 500px; height: 303px"
+          :option="hotSearchChartOption"
+        />
+      </div>
+    </el-card>
     <el-card
       shadow="never"
       header="浏览人数排名"
@@ -471,8 +480,22 @@
   import { getActivityStatistics } from '@/api/sylive/activity';
   const ROUTE_PATH = '/sylive/activity/statistics';
 
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { FunnelChart } from 'echarts/charts';
+  import { TooltipComponent } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import 'echarts-wordcloud';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+
+  use([CanvasRenderer, TooltipComponent, FunnelChart]);
+
   export default {
     name: 'SyliveActivityStatistics',
+    components: {
+      VChart
+    },
+    mixins: [echartsMixin(['hotSearchChart'])],
     data() {
       return {
         statistics: {
@@ -495,7 +518,9 @@
         watchConsultantRank: [],
         orderAreaRank: [],
         orderBizRank: [],
-        orderConsultantRank: []
+        orderConsultantRank: [],
+        // 词云图表配置
+        hotSearchChartOption: {}
       };
     },
     computed: {
@@ -517,6 +542,54 @@
             this.$util.assignObject(this.statistics, {
               ...data
             });
+            console.log(data);
+            //漏斗图
+            if (data.funnel.actual_data[0].value > 0) {
+              this.hotSearchChartOption = {
+                series: [
+                  {
+                    name: 'Expected',
+                    type: 'funnel',
+                    top: '1%',
+                    bottom: '5%',
+                    left: '2%',
+                    width: '72%',
+                    label: {
+                      position: 'right',
+                      formatter: '{b}'
+                    },
+                    labelLine: {
+                      show: false
+                    },
+                    itemStyle: {
+                      opacity: 0.7
+                    },
+                    data: data.funnel.expected_data
+                  },
+                  {
+                    name: 'Actual',
+                    type: 'funnel',
+                    top: '1%',
+                    bottom: '5%',
+                    left: '7%',
+                    width: '62%',
+                    maxSize: '62%',
+                    label: {
+                      position: 'inside',
+                      formatter: '{c}',
+                      color: '#000'
+                    },
+                    itemStyle: {
+                      opacity: 0.4,
+                      borderColor: '#fff',
+                      borderWidth: 1
+                    },
+                    data: data.funnel.actual_data,
+                    z: 100
+                  }
+                ]
+              };
+            }
             // 修改页签标题
             if (this.$route.path === ROUTE_PATH) {
               setPageTabTitle(data.title + '的数据统计');