漏斗图优化

src/views/user-path/add-funnel.vue

@@ -42,7 +42,14 @@
                         </el-col>
                         <el-col :span="11">
                             <el-form-item label="触发事件">
-                                <el-input v-show="!showEvent && funnelId" :class="{'red-b': item.unchecked}" @focus="getEventData" v-model="item.eventName" style="width:300px;"></el-input>
+                                <el-input 
+                                v-show="!showEvent && funnelId" 
+                                :class="{'red-b': item.unchecked}"
+                                @focus="getEventData" 
+                                v-model="item.eventName" 
+                                style="width:300px;"
+                                :title="item.eventName"
+                                placeholder="请选择用户触发事件"></el-input>
                                 <el-select 
                                 v-show="!funnelId || showEvent"
                                 v-model="item.eventId" 
@@ -50,6 +57,7 @@
                                 placeholder="请选择用户触发事件" 
                                 :class="{'red-b': item.unchecked}"
                                 @blur="selectValid(item)"
+                                @change="eventChange(item, index)"
                                 style="width:300px"
                                 >
                                     <el-option
@@ -139,6 +147,7 @@ export default {
                 }
             );
         },
+        // 漏斗名称是否有值判断
         validValue() {
             if(this.searchParam.name) {
                 this.disabledSave = false;
@@ -159,6 +168,19 @@ export default {
                 }
             })
         },
+        // 触发事件不重复
+        eventChange(item, index) {
+            let arr = [];
+            for(let i = 0; i < this.searchParam.actionModelList.length; i++) {
+                if(index != i) {
+                    if(item.eventId == this.searchParam.actionModelList[i].eventId) {
+                        this.$message.error('触发事件重复');
+                        this.searchParam.actionModelList[index].eventId = '';
+                    }
+                }
+            }
+        },
+        // 触发事件是否为空样式
         selectValid(item) {
             if(item.eventId) {
                 this.$set(this.searchParam.actionModelList[i], 'unchecked', false);

src/views/user-path/funnel-data.vue

@@ -112,7 +112,7 @@ export default {
             endDateOpt1: {
                 disabledDate: time => {
                     return (
-                        time.getTime() < new Date(this.searchParam.startDate).getTime()
+                        time.getTime() < new Date(this.searchParam.startDate).getTime() || time.getTime() > (new Date(this.searchParam.startDate).getTime() + 3600 * 1000 * 24 * 30)
                     );
                 }
             }
@@ -142,12 +142,13 @@ export default {
                 })
         },
         // 获取版本号数据
-        getVersionData() { //https://dev-sc.yunqueyi.com/session/funnel/version/list
+        getVersionData() { 
             this.getData(
                 "get", `/session/funnel/version/list`, {},
                 res => {
                     if(res.code == '000000') {
                         this.versionSelect = res.data;
+                        this.searchParam.version = this.versionSelect[0];
                     }
                 }
             );
@@ -161,11 +162,12 @@ export default {
                     if(res.code == '000000') {
                         this.funnelData = res.data;
                         this.initCharts();
+                        //this.initEchart();
                     }
                 }
             );
         },
-        // 初始化图标
+        // 初始化图标--漏斗图
         initCharts() {
             let lineargroup = this.funnelData.funnelReportModels;
             let len = lineargroup.length;
@@ -184,7 +186,23 @@ export default {
                     }],
                     global: false // 缺省为 false
                 };
-            let data1 = [], dataArr = [], valueArr = [], lineArr = [], linksArr = [];
+            let data1 = [], dataArr = [], valueArr = [], lineArr = [], linksArr = [], arrowTop = 0, arrowH = 0, lineCur = 0;
+            if(len == 2) {
+                arrowTop = 105;
+                arrowH = 130;
+            }else if(len == 3) {
+                arrowTop = 115;
+                arrowH = 130;
+            }else if(len == 4) {
+                arrowTop = 88;
+                arrowH = 210;
+            }else if(len == 5) {
+                arrowTop = 70;
+                arrowH = 260;
+            }else if(len == 6) {
+                arrowTop = 105;
+                arrowH = 130;
+            }
             for (let i = 0; i < lineargroup.length; i++) {
                 let obj1 = {
                     value: 200 - i * 40,
@@ -213,13 +231,14 @@ export default {
                     y: 0 + i*15
                 });
             }
+            
             let option = {
                 backgroundColor: '#ffffff',
                 grid: {  
-                    top: 115 - len * 4,  // 箭头距离顶部高度  3-115  4-
+                    top: arrowTop,  // 箭头距离顶部高度  3-115  4-
                     left: "-34%",
                     right: 20,
-                    height: 50 + len * 30,  // 箭头之间的距离  3-145 4-
+                    height: arrowH,  // 箭头之间的距离  3-145 4-
                     bottom: '0'
                 },
                 xAxis: {
@@ -321,11 +340,86 @@ export default {
             let myChart = this.$echarts.init(this.$refs.chart);
             myChart.setOption(option);
         },
+        // 初始化图--柱状图
+        initEchart() {
+            let dataX = [], dataY = [];
+            let lineargroup = this.funnelData.funnelReportModels;
+            for(let i = 0; i < lineargroup.length; i++) {
+                dataX.push(lineargroup[i].funnelName);
+                dataY.push(lineargroup[i].inversionRate);
+            }
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: dataX,
+                        axisPointer: {
+                            type: 'shadow'
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '',
+                        min: 0,
+                        max: 100,
+                        interval: 25,
+                        axisLabel: {
+                            formatter: '{value} %'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        type: 'bar',
+                        barWidth: 30,
+                        data: [80,60,20],   // dataY
+                        itemStyle: {
+                            normal: {
+                                label: {
+                                    show: true, //开启显示
+                                    position: 'top', //在上方显示
+                                    textStyle: { //数值样式
+                                        color: 'black',
+                                        fontSize: 16
+                                    }
+                                },
+                                color: function(params) {
+                                    return '#58ADE8'
+                                }
+                            }
+                        }
+                    },
+                    {
+                        name:'折线',
+                        type:'line',
+                        itemStyle : {  /*设置折线颜色*/
+                            normal : {
+                                color:'#58ADE8'
+                            }
+                        },
+                        data: [80,60,20]   // dataY
+                    }
+                ]
+            };
+            let myChart = this.$echarts.init(this.$refs.chart);
+            myChart.setOption(option);
+        },
         reset() {
             this.searchParam = {
                 endDate: '2020-11-23',
                 startDate: '2020-11-20',
-                version: ''
+                version: this.versionSelect[0]
             };
         }
     }