漏斗数据

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 + '的数据统计');