VISALL 漏斗图 (Funnel Chart) 使用文档

简介

漏斗图组件是VISALL数据可视化库中的重要图表类型之一，用于展示数据项依次递减或递增的流程数据。该组件适用于展示业务流程中各阶段的转化率、销售流程中各环节的转化情况等场景，能够直观地呈现数据在各阶段的变化趋势。

基本用法

import { render } from 'path/to/bundle.esm.min.js';

// 创建漏斗图
const chart = render(container, {
  layers: [
    {
      type: 'funnel',
      dataIndex: 0,
      encoding: {
        x: '阶段', // 类别字段名
        y: '数量'  // 数值字段名
      }
    }
  ],
  data: [
    {
      values: [
        { 阶段: '访问', 数量: 100 },
        { 阶段: '咨询', 数量: 80 },
        { 阶段: '意向', 数量: 60 },
        { 阶段: '成交', 数量: 40 },
        { 阶段: '复购', 数量: 20 }
      ]
    }
  ]
});

配置参数

参数	类型	默认值	说明
encoding.x	string	-	类别字段映射，必须提供一个字符串类型字段
encoding.y	string	-	数值字段映射，必须是数值类型字段
dataIndex	number	0	指定使用的数据集索引

数据要求

• x字段要求为字符串类型，用于表示漏斗图的各个阶段
• y字段要求为数值类型，用于表示各阶段的数值大小
• 数据量至少需要大于1条才能形成有效的漏斗图
• 数据推荐按照数值从大到小或从小到大的顺序排列，以便更好地展示流程的递减或递增趋势

高级用法

流程转化率展示

漏斗图最常用于展示业务流程中的转化率：

{
  type: 'funnel',
  encoding: {
    x: '销售阶段',
    y: '客户数量'
  }
}

潜规则与注意事项

1. 数据排序规则：

   • 漏斗图会按照数据的原始顺序进行展示，不会自动排序
   • 如需按照数值大小排序，需要在传入数据前预先处理

2. 单位显示：

   • 如果数据元信息中包含单位信息，会自动在提示框中显示
   • 单位格式：字段名(单位)，例如：客户数量(人)

3. 渲染机制：

   • 漏斗图不需要坐标轴，会自动隐藏坐标轴
   • 漏斗图的宽度会根据容器大小自适应调整

使用场景示例

销售漏斗

{
  type: 'funnel',
  encoding: {
    x: '销售阶段',
    y: '客户数量'
  },
  dataIndex: 0
}

网站转化漏斗

{
  type: 'funnel',
  encoding: {
    x: '用户行为',
    y: '访问量'
  },
  dataIndex: 0
}

常见问题解决

1. 漏斗图显示不全

   • 检查容器大小是否足够
   • 检查数据是否存在异常

2. 数据展示顺序问题

   • 如需特定顺序展示，请预先对数据进行排序
   • 确保数据中的类别字段值唯一

3. 自定义样式

   • 可通过标准图表的样式配置选项调整漏斗图的外观
   • 支持通过主题定制漏斗图的颜色、文本样式等