销售漏斗

src/components/analysis/analysis/analysisHome.vue

@@ -40,7 +40,7 @@
           <el-row class="header-title" style="height: 100%;">
             <el-col>
               <span class="title-two">销售漏斗</span>
-              <div id="c1" style="height:400px;"></div>
+              <div id="c2" style="height:400px;"></div>
             </el-col>
           </el-row>
           <el-row class="header-title" style="height: 100%;">
@@ -84,6 +84,7 @@ import TimeSearchForm from './timeSearchForm'
 import singleRadioTool from '../../common/singleRadioTool'
 import individualContributions from './individualContributions.js'
 import salesAchievements from './salesAchievements.js'
+import chartSalesFunnel from './chartSalesFunnel.js'
 import {
   requestAPI,
   api
@@ -91,7 +92,7 @@ import {
 export default {
   name: 'caseHome',
 
-  mixins: [individualContributions, salesAchievements],
+  mixins: [individualContributions, salesAchievements, chartSalesFunnel],
 
   components: {
     SearchHeader,
@@ -129,6 +130,7 @@ export default {
         .then(res => {
           this.result.countList = res.counts
           this.c1(res.chars['individualContributions'])
+          this.c2(res.chars['chartSalesFunnel'])
           this.c3('c3-1', res.chars.salesAchievements.child.chartSalesArchievementJournalAccount)
           this.c3('c3-2', res.chars.salesAchievements.child.chartSalesArchievementProfits)
           this.c3('c3-3', res.chars.salesAchievements.child.chartSalesArchievementProjects)

src/components/analysis/analysis/chartSalesFunnel.js

+export default {
+  methods: {
+    /* eslint-disable */
+    c2 (data) {
+      let _data = data.values
+      Highcharts.chart('c2', {
+      	chart: {
+      		type: 'bar'
+      	},
+      	title: {
+      		text: ''
+      	},
+      	xAxis: {
+      		categories: _data.categories
+      	},
+      	yAxis: {
+      		min: 0,
+      		title: {
+      			text: ''
+      		}
+      	},
+      	legend: {
+          enabled: false
+      	},
+      	plotOptions: {
+      		series: {
+      			stacking: 'normal'
+      		}
+      	},
+        tooltip: {
+      		formatter: function () {
+            let ret = ''
+            let _x = this.x
+            if (_x === '平均') {
+              ret += `<b>${_x}</b><br/>${this.point.stackTotal}`
+            } else {
+              ret += `<b>${this.series.name}</b><br/>`
+              if (this.series.userOptions.title) {
+                ret += `项目名称：<b>${this.series.userOptions.title}</b><br/>`
+              }
+              if (this.series.userOptions.budget) {
+                ret += `商机金额：${this.series.userOptions.budget}元<br/>`
+              }
+              if (this.series.userOptions.bargain_date) {
+                ret += `成交日期：${this.series.userOptions.bargain_date}<br/>`
+              }
+              ret += `商机批注：${this.series.userOptions.comment}`
+            }
+            return ret
+      		}
+      	},
+        series: _data.series
+      });
+    }
+  }
+}