feat(funnel): 增加 filterZero 和 useDefaultOrder 属性

docs/en/funnel.md

@@ -60,6 +60,39 @@
 </script>
 </script>
 
+#### auto set order and filter data which value is 0
+
+<vuep template="#use-default-filter"></vuep>
+
+<script v-pre type="text/x-template" id="use-default-filter">
+<template>
+  <ve-funnel :data="chartData" :settings="chartSettings"></ve-funnel>
+</template>
+
+<script>
+  export default {
+    data () {
+      this.chartSettings = {
+        useDefaultOrder: true,
+        filterZero: true
+      }
+      return {
+        chartData: {
+          columns: ['status', 'value'],
+          rows: [
+            { 'status': 'display', 'value': 900 },
+            { 'status': 'visit', 'value': 100 },
+            { 'status': 'zeroValue', 'value': 0 },
+            { 'status': 'click', 'value': 300 },
+            { 'status': 'order', 'value': 200 }
+          ]
+        }
+      }
+    }
+  }
+</script>
+</script>
+
 #### custom order
 
 <vuep template="#custom-order-funnel"></vuep>
@@ -195,6 +228,8 @@
 | dataType | data type of metrics | string | `'KMB'`, `'normal'`, `'percent'` |
 | sequence | custom data order | array | defautthe order of the data |
 | ascending | whether display as pyramid | boolean | default `false` |
+| useDefaultOrder | auto sort data by metrics value | boolean | default `false` |
+| filterZero | whether filter data which value is 0 | boolean | default `false` |
 | digit | digit of percent type data | number | default `2` |
 | label | label of chart | object | content reference [docs](http://ecomfe.github.io/echarts-doc/public/en/option.html#series-funnel.label) |
 | labelLine | visual guide line style of label | object | content reference [docs](http://ecomfe.github.io/echarts-doc/public/en/option.html#series-funnel.labelLine) |

docs/funnel.md

@@ -60,6 +60,39 @@
 </script>
 </script>
 
+#### 自动按照数值排序并过滤0值
+
+<vuep template="#use-default-filter"></vuep>
+
+<script v-pre type="text/x-template" id="use-default-filter">
+<template>
+  <ve-funnel :data="chartData" :settings="chartSettings"></ve-funnel>
+</template>
+
+<script>
+  export default {
+    data () {
+      this.chartSettings = {
+        useDefaultOrder: true,
+        filterZero: true
+      }
+      return {
+        chartData: {
+          columns: ['状态', '数值'],
+          rows: [
+            { '状态': '展示', '数值': 900 },
+            { '状态': '访问', '数值': 100 },
+            { '状态': '零', '数值': 0 },
+            { '状态': '点击', '数值': 300 },
+            { '状态': '订单', '数值': 200 }
+          ]
+        }
+      }
+    }
+  }
+</script>
+</script>
+
 #### 定制顺序漏斗图
 
 <vuep template="#custom-order-funnel"></vuep>
@@ -195,6 +228,8 @@
 | dataType | 数据类型 | string | 可选值: KMB, normal, percent |
 | sequence | 数据显示顺序 | array | 默认按照数据大小顺序 |
 | ascending | 是否显示为金字塔 | boolean | 默认为false |
+| useDefaultOrder | 是否自动按照数值大小排序 | boolean | 默认为false |
+| filterZero | 是否过滤指标为0的数据 | boolean | 默认为false |
 | digit | 设置数据类型为percent时保留的位数 | number | 默认为2 |
 | label | 设置文本标签样式 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-funnel.label) |
 | labelLine | 设置标签的视觉引导线样式 | object | 内容参考[文档](http://echarts.baidu.com/option.html#series-funnel.labelLine) |

examples/data/funnel.js

@@ -15,6 +15,23 @@ export default {
       },
       settings: {}
     },
+    {
+      name: '使用默认顺序',
+      data: {
+        columns: ['状态', '数值'],
+        rows: [
+          { '状态': '展示', '数值': 900 },
+          { '状态': '访问', '数值': 100 },
+          { '状态': '零', '数值': 0 },
+          { '状态': '点击', '数值': 300 },
+          { '状态': '订单', '数值': 200 }
+        ]
+      },
+      settings: {
+        useDefaultOrder: true,
+        filterZero: true
+      }
+    },
     {
       name: '定制维度顺序',
       data: {

src/packages/funnel/main.js

@@ -32,31 +32,39 @@ function getFunnelSeries (args) {
     ascending,
     label,
     labelLine,
-    itemStyle
+    itemStyle,
+    filterZero,
+    useDefaultOrder
   } = args
   let series = { type: 'funnel' }
-  rows.sort((a, b) => {
+  let innerRows = rows.sort((a, b) => {
     return sequence.indexOf(a[dimension]) - sequence.indexOf(b[dimension])
   })
 
+  if (filterZero) {
+    innerRows = innerRows.filter(row => {
+      return row[metrics]
+    })
+  }
+
   let falseFunnel = false
-  rows.some((row, index) => {
-    if (index && row[metrics] > rows[index - 1][metrics]) {
+  innerRows.some((row, index) => {
+    if (index && row[metrics] > innerRows[index - 1][metrics]) {
       falseFunnel = true
       return true
     }
   })
 
-  const step = 100 / rows.length
+  const step = 100 / innerRows.length
 
-  if (falseFunnel) {
-    series.data = rows.slice().reverse().map((row, index) => ({
+  if (falseFunnel && !useDefaultOrder) {
+    series.data = innerRows.slice().reverse().map((row, index) => ({
       name: row[dimension],
       value: (index + 1) * step,
       realValue: row[metrics]
     }))
   } else {
-    series.data = rows.map(row => ({
+    series.data = innerRows.map(row => ({
       name: row[dimension],
       value: row[metrics],
       realValue: row[metrics]
@@ -82,7 +90,9 @@ export const funnel = (outerColumns, outerRows, settings, extra) => {
     label,
     labelLine,
     legendName = {},
-    itemStyle
+    itemStyle,
+    filterZero,
+    useDefaultOrder
   } = settings
   const { tooltipVisible, legendVisible } = extra
   let metrics
@@ -95,18 +105,19 @@ export const funnel = (outerColumns, outerRows, settings, extra) => {
   }
 
   const tooltip = tooltipVisible && getFunnelTooltip(dataType, digit)
-  const seriesParams = {
+  const legend = legendVisible && getFunnelLegend({ data: sequence, legendName })
+  const series = getFunnelSeries({
     dimension,
     metrics,
     rows,
     sequence,
     ascending,
     label,
     labelLine,
-    itemStyle
-  }
-  const legend = legendVisible && getFunnelLegend({ data: sequence, legendName })
-  const series = getFunnelSeries(seriesParams)
+    itemStyle,
+    filterZero,
+    useDefaultOrder
+  })
   const options = { tooltip, legend, series }
   return options
 }