Funnel漏斗图数据格式不对怎么调？

长孙培静提问于 2026-02-28 14:20:20 阅读 76

组件

我用ECharts做漏斗图，但数据传进去后图形显示异常，好像只渲染了第一项。

官方文档说要传数组对象，我试了{ value: 100, name: '步骤1' }这种格式，但还是不行。是不是还要加其他字段？

我的配置代码如下：

option = {
  series: [{
    type: 'funnel',
    data: [
      { value: 60, name: '访问' },
      { value: 40, name: '咨询' },
      { value: 20, name: '订单' }
    ]
  }]
};

图表组件

我来解答赞 5 收藏

反馈

1 条解答

令狐伊果 Lv1

这问题我之前也踩过坑，看了你的代码，数据格式本身没问题，但漏斗图有几个配置项如果不设置，很容易出现渲染异常。

最常见的原因是容器高度不够或者没设置。漏斗图比较吃高度，你检查一下DOM容器有没有给明确的高度值，像这样：

然后你的option配置太精简了，补全一下关键的配置项：

option = {

  series: [{

    type: 'funnel',

    left: '10%',

    top: 60,

    bottom: 60,

    width: '80%',

    min: 0,

    max: 100,

    minSize: '0%',

    maxSize: '100%',

    sort: 'descending',

    gap: 2,

    label: {

      show: true,

      position: 'inside'

    },

    data: [

      { value: 60, name: '访问' },

      { value: 40, name: '咨询' },

      { value: 20, name: '订单' }

    ]

  }]

};

血泪教训：min和max这两个字段最好显式设置，不然ECharts有时候会根据数据自动推算出一个奇怪的区间，导致图形比例失调。minSize和maxSize控制漏斗底部和顶部的宽度占比，不设置的话也可能显示不正常。

另外sort属性决定漏斗的排序方式，默认是降序descending，如果你希望按数据原始顺序显示，可以改成none。

如果上面这些都设置了还是有问题，打开浏览器控制台看看有没有报错，有时候是初始化的时候容器还没渲染出来，套个setTimeout或者放mounted生命周期里就行。

2026-02-28 19:54