漏斗图

[配置项]

简介

漏斗图，形如“漏斗”，用于单流程分析，在开始和结束之间由 N 个流程环节组成，通常这 N 个流程环节，有逻辑上的顺序关系。

图表构成

漏斗图由具有层级关系的多边形图元（该多边形默认是梯形，也可以是矩形，视用户配置而定）、转化层、标签等基本元素及其他组件构成。

多边形图元为漏斗图的基本要素，相关的绘制配置必不可少:

funnelChart.type: 图表类型，漏斗图的类型为'funnel'
funnelChart.data: 图表绘制的数据源
funnelChart.categoryField: 分类字段，映射为不同图元
funnelChart.valueField: 数值字段，映射为矩形图元的大小或梯形图元的顶边及底边的长度

转化层、标签等辅助元素，仅在特定配置下展示且在不同配置下展示形式略有不同：

funnelChart.label: 漏斗图标签配置，'visible: true'时展示。
funnelChart.isTransform: 是否展示转化层，该配置为'true'时展示。

提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:

funnelChart.tooltip: 提示信息，默认交互时显示，详细配置见VChart 提示信息组件配置
更多组件配置见VChart funnelChart 配置

快速上手

关键配置

type: funnel 指定图表类型为漏斗图
categoryField 指定分类字段
valueField 指定值字段

漏斗图特性

数据

一个离散 字段，如: name ，表示不同漏斗层
一个数值字段，如: value ，表示不同漏斗层代表的数值

需要注意的是，由于漏斗图表示不同流程的转化关系，所以理论上来说数据是有序的，彼此之间有逻辑上的顺序关系，阶段最好大于 3 个。

data: [
  {
    name: 'funnel',
    values: [
      {
        name: 'Step1',
        value: 100
      },
      {
        name: 'Step2',
        value: 80
      },
      {
        name: 'Step3',
        value: 60
      }
    ]
  }
];

漏斗图布局

转化漏斗图

当配置funnelChart.isTransform: true时，漏斗图将在层与层之间新增转化层并自动计算转化率，转化率 = 下层数据 / 上层数据，它表示下一步骤相比上一步骤数值上的变化。

漏斗图对齐方式

可以通过funnelChart.funnelAlign: 'left' | 'right' | 'center'指定漏斗图朝向，默认值为'center'。

漏斗图朝向

可以通过funnelChart.funnelOrient: 'left' | 'right' | 'top' | 'bottom'指定漏斗图朝向，默认值为'top'。

图元及样式

漏斗图元形状

漏斗图图元形状默认为梯形，即funnelChart.shape默认值为'trapezoid'。在 VChart 中，漏斗图形状还可指定为矩形，即funnelChart.shape: 'rect'。

漏斗下层尖角

当漏斗图形状为默认的梯形'trapezoid'时，可通过funnelChart.isCone指定最下层是否有尖角，默认为true。

漏斗层像素间隔

可以通过funnelChart.gap指定漏斗层之间的像素间隔，默认值为0。

漏斗最大最小宽度

可以通过funnelChart.maxSize 和 funnelChart.minSize指定漏斗层之间的像素间隔，支持配置像素值和百分比，默认值分别为'80%' 和 0。

漏斗图

简介