如何让Apache ECharts漏斗图在数值差异极大时显示为标准三角形？

当漏斗图各层级数值差异悬殊（如顶层「Ad Request」为2000000，底层「Revenue」为50），默认配置下会因数值比例失衡导致无法渲染为标准三角形形态。

解决方案 #

核心思路是让漏斗图的层级宽度基于层级顺序而非原始数值，具体实现方式如下：

• 给每个数据项设置按层级顺序等差的value（确保从顶层到底层依次递减）
• 通过自定义标签格式化，在图表上显示原始真实数值

修改后的完整配置代码：

option = {
  legend: {
    data: ['Ad Request', 'Impressions', 'Clicks', 'Orders', 'Revenue']
  },
  series: [
    {
      name: 'test-funnel',
      type: 'funnel',
      // 按value升序排序，匹配三角形从窄到宽的形态
      sort: 'ascending',
      data: [
        {
          value: 1,
          name: 'Revenue',
          realValue: 50
        },
        {
          value: 2,
          name: 'Orders',
          realValue: 100
        },
        {
          value: 3,
          name: 'Clicks',
          realValue: 1000
        },
        {
          value: 4,
          name: 'Impressions',
          realValue: 10000
        },
        {
          value: 5,
          name: 'Ad Request',
          realValue: 2000000
        }
      ],
      label: {
        position: 'inside',
        // 自定义标签，展示名称和真实业务数值
        formatter: (params) => `${params.name}\n${params.data.realValue}`
      }
    }
  ]
};

关键配置说明 #

• sort: 'ascending'：确保漏斗从底层到顶层按设置的等差value递增排列，形成标准三角形
• 自定义realValue字段：存储原始业务数值，避免其影响漏斗的宽度计算逻辑
• label.formatter：在不改变漏斗形态的前提下，保证业务数据的可读性

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