Angular中使用Highcharts如何实现分区等高、数据值不同的漏斗图

核心实现思路 #

默认漏斗图的区块高度完全由data数组中每个项的y值权重决定，只要将所有数据项的y值统一设为相同值，就能保证所有区块高度相等，真实业务数据可以存在自定义属性中，后续在标签、提示框中调用自定义属性展示即可。

具体代码实现步骤 #

• 第一步：改造数据结构，给每个数据项增加自定义字段存储真实业务值，y值统一设为1（或者其他任意相同数值均可）

// 示例原始业务数据
const rawData = [
  { name: '访问', value: 10000 },
  { name: '点击', value: 5000 },
  { name: '加购', value: 3000 },
  { name: '下单', value: 1500 },
  { name: '支付', value: 800 }
];
// 转换为漏斗图可用的等高数据结构
const funnelData = rawData.map(item => ({
  name: item.name,
  y: 1, // 所有y值统一，保证高度相等
  realValue: item.value // 自定义字段存储真实业务值
}));

• 第二步：配置漏斗图的dataLabels和tooltip，读取自定义的realValue字段展示，替代默认的y值

// Highcharts 核心配置示例
highchartsOptions: Highcharts.Options = {
  chart: {
    type: 'funnel'
  },
  plotOptions: {
    funnel: {
      dataLabels: {
        // 数据标签展示真实业务值
        format: '<b>{point.name}</b>: {point.realValue}'
      }
    }
  },
  tooltip: {
    // 提示框也展示真实业务值
    pointFormat: '{series.name}: <b>{point.realValue}</b>'
  },
  series: [{
    name: '转化数据',
    data: funnelData
  }]
};

• 第三步：漏斗的宽度会按照数据顺序自动收缩，符合漏斗图的常规视觉表现，无需额外调整配置。

替代方案 #

如果上述方案不符合你的业务需求，可以选择用柱状图模拟等高漏斗效果：将每个柱子的宽度按照数据权重设置，高度统一，视觉上和等高漏斗完全一致，可自定义空间更高。

内容的提问来源于stack exchange，提问作者Karumanchi Srikanth