feat(funnel): 漏斗图功能增强

app/data/funnel.js

@@ -1,3 +1,5 @@
+import { max } from 'lodash'
+
 const baseData = {
   dimensions: {
     name: '渠道',
@@ -16,10 +18,27 @@ const compareData = {
   },
   measures: [{
     name: 'PV',
-    data: [36000, 28000, 24000, 20000, 12000, 6000]
+    data: [100, 80, 60, 50, 40, 20]
   }, {
     name: 'UV',
-    data: [28000, 22000, 18000, 14000, 8000, 2000]
+    data: [80, 75, 50, 40, 32, 10]
+  }]
+}
+
+const sameData = {
+  dimensions: {
+    name: '渠道',
+    data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
+  },
+  measures: [{
+    name: 'PV',
+    data: [36000, 28000, 24000, 20000, 12000, 6000]
+  }, {
+    name: 'PV',
+    data: [36000, 28000, 24000, 20000, 12000, 6000]
+  }, {
+    name: 'PV',
+    data: [36000, 28000, 24000, 20000, 12000, 6000]
   }]
 }
 
@@ -60,6 +79,38 @@ export default {
         contrast: true
       }
     },
+    {
+      title: '漏斗图 - 转化率',
+      data: sameData,
+      settings: {
+        funnelLabel: [
+          {
+            normal: {
+              position: 'right'
+            }
+          },
+          {
+            normal: {
+              position: 'left',
+              formatter: function (params) {
+                const [, value] = params.value
+                return value
+              }
+            }
+          },
+          {
+            normal: {
+              position: 'inside',
+              formatter: function (params) {
+                const [, value] = params.value
+                const maxMea = max([36000, 28000, 24000, 20000, 12000, 6000])
+                return `转化率 ${Math.round(value / maxMea * 100)} %`
+              }
+            }
+          }
+        ]
+      }
+    },
     {
       title: '对称漏斗图',
       data: compareData,

src/packages/funnel/chartHandler.js

@@ -22,13 +22,15 @@ function getFunnelLegend(args) {
 
 function getFunnelSeries(args) {
   const { data, settings } = args
-  const { measures } = data
+  const { dimensions, measures } = data
+  const dimName = dimensions && `${dimensions.name} `
   const {
     funnelSort = 'desc',
     funnelAlign = 'center',
     contrast = false,
     symmetric = false,
     labelPosition = 'outside',
+    funnelLabel,
     ...others
   } = settings
 
@@ -60,8 +62,17 @@ function getFunnelSeries(args) {
   const getLabel = (settings, idx) => {
     const {
       contrast,
-      symmetric
+      symmetric,
+      funnelLabel
     } = settings
+    if (funnelLabel) {
+      // label is array
+      if (Array.isArray(funnelLabel)) {
+        return funnelLabel[idx]
+      } else {
+        return funnelLabel
+      }
+    }
     let label = {
       normal: {
         position: labelPosition
@@ -72,11 +83,23 @@ function getFunnelSeries(args) {
       const contrastLabel = {
         normal: {
           position: 'inside',
-          formatter: '{d}%'
+          formatter: params => {
+            const maxValue = measures.reduce((prev, next) => {
+              return max([max(prev.data), max(next.data)])
+            })
+            const [, , mea2] = params.value
+            return `${Math.round((mea2 / maxValue * 100), 2)}%`
+          }
         },
         emphasis: {
           position: 'inside',
-          formatter: '{a}: {d}%'
+          formatter: params => {
+            const maxValue = measures.reduce((prev, next) => {
+              return max([max(prev.data), max(next.data)])
+            })
+            const [dimName, , mea2] = params.value
+            return `${dimName} ${Math.round((mea2 / maxValue * 100), 2)}%`
+          }
         }
       }
 
@@ -101,6 +124,13 @@ function getFunnelSeries(args) {
     return label
   }
 
+  const getEncode = (dimName, meaName) => {
+    return {
+      itemName: dimName,
+      value: meaName
+    }
+  }
+
   const series = []
   measures.forEach(({ name, data }, idx) => {
     series.push({
@@ -111,7 +141,8 @@ function getFunnelSeries(args) {
       width: symmetric ? '40%' : '80%',
       x: getX(symmetric, idx),
       maxSize: !contrast || idx === 0 ? '100%' : getMaxSize(measures),
-      label: getLabel({ contrast, symmetric }, idx),
+      label: getLabel({ contrast, symmetric, funnelLabel }, idx),
+      encode: getEncode(dimName, name),
       ...others
     })
   })
@@ -138,7 +169,7 @@ export const funnel = (data, settings, extra, isDonut) => {
     series
   }
 
-  // console.log(options)
+  // console.log(JSON.stringify(options))
 
   return options
 }