销售漏斗

src/views/mediaStatistics/modules/salesfunnel.vue

@@ -429,6 +429,96 @@ export default {
             this.getProjectList()
           }
 
+        })
+        this.getProportionOfFileModel()
+      }else if(JSON.parse(sessionStorage.getItem('flagIndex')) === 6){
+        const colorArray = ['#6395fa','#63daab','#657798','#f7c122','#7666fa'];
+        this.chartPie = new Funnel('containerFunnel', {
+          data: this.tableData,
+          maxSize:0.6,
+          xField: 'stagename',
+          yField: 'wide',
+          shape: 'funnel',
+          dynamicHeight: false,
+          legend: false,
+          interactions: [{ type: 'element-active'}],
+          color:['#6395fa','#63daab','#657798','#f7c122','#7666fa','#fff'],
+          label: {
+            layout:"fixedOverlap",
+            position:'right',
+            offsetX:40,
+            content:(datum)=>{
+              const group = new G.Group({});
+              const content = ()=>{
+                if (this.tableData[0]) {
+                  const text = `${datum.stagename}  当前项目数: ${datum.projectqty} 项目数: ${datum.sequence1} 转化率: ${datum.zhl?Math.round((datum.zhl* 100)*100)/100 + '%':'--'}  预计签约金额: ${datum.signamount_due}万元`
+                  const lines = text.split('  ');
+                  return lines.join('\n');
+                }
+              };
+              const color = ()=>{
+                let clr = ''
+                this.tableData.some((e,index) =>{
+                  if (e.stagename == datum.stagename) {
+                    clr = colorArray[index]
+                  }
+                })
+                if (clr == '' || clr == undefined) {
+                  clr= '#ffffff'
+                }
+                return clr
+              };
+              group.addShape({
+                type: 'text',
+                attrs: {
+                  x: 40,
+                  y: 0,
+                  text: content(),
+                  textAlign: 'left',
+                  fontSize: 14,
+                  textBaseline: 'top',
+                  fill: color()
+                },
+              });
+              return group;
+            },
+          },
+
+          tooltip:{
+            customContent: (title, items) => {
+              // 构建自定义内容
+              const content = `<div>
+              <ul style="padding:10px;">
+                ${items.map((item) => `
+                <li>
+                <p style="margin-bottom:10px">${title}</p>
+                <p>项目数:${item.data.projectqty}</p>
+                </li>`).join('')}
+              </ul>
+            </div>`;
+
+              return content;
+            },
+          },
+          conversionTag: false,
+          funnelStyle: {
+            stroke: '#fff',
+            lineWidth: 3,
+          },
+        });
+        this.chartPie.render();
+        document.addEventListener('click',(evt) => {
+          const states = this.chartPie.getStates();
+          let dataList = []
+          dataList = states
+          if (dataList.length > 0){
+            this.projectTile = dataList[0].data.stagename
+            this.sa_projstagemagid = dataList[0].data.sa_projstagemagid
+            this.projectParam.content.pageNumber = 1
+            this.projectParam.content.pageSize = 10
+            this.getProjectList()
+          }
+
         })
         this.getProportionOfFileModel()
       } else {