Funnel漏斗图的各个阶段宽度比例不按预期显示怎么办？
我在用ECharts做漏斗图的时候，发现各个阶段的宽度比例完全不对。按照文档设置了width: '40%'，但每个阶段的宽度看起来完全随机，比如第一阶段是最大宽度，第二阶段反而比第四阶段还窄。
我尝试过调整数据顺序和数值比例，但没用。这是我的配置代码：
option = {
series: [{
type: 'funnel',
data: [
{value: 150, name: '阶段1'},
{value: 120, name: '阶段2'},
{value: 90, name: '阶段3'},
{value: 60, name: '阶段4'}
],
sort: 'ascending',
width: '40%',
label: {
show: true
}
}]
};
数据明明是递减的，但图表显示阶段2（120）反而比阶段3（90）宽很多。有没有可能跟sort参数或比例计算方式有关？应该怎么调整才能让宽度严格按数值比例显示？
1 条解答
漏斗图每个阶段的宽度是根据 value 值与最大值的比例来计算的，而不是你设置的 width。虽然你数据中 value 是递减的，但你设置了 sort: 'ascending'，这会让漏斗图底部最窄，顶部最宽，也就是说阶段1（150）是最大的阶段，所以它会被当作 100% 宽度基准。
如果你希望阶段宽度严格按照 value 比例显示，且不受到 sort 排序的影响，可以尝试下面的做法：
option = {
series: [{
type: 'funnel',
data: [
{value: 150, name: '阶段1'},
{value: 120, name: '阶段2'},
{value: 90, name: '阶段3'},
{value: 60, name: '阶段4'}
],
sort: 'descending', // 改为降序排列，确保最大值在最上面
width: '40%',
label: {
show: true
}
}]
};
如果你还是发现宽度比例不对，可以尝试不设置 width，让 ECharts 自动计算一个合理的最大宽度。宽度比例计算的问题就交给 ECharts 内部处理。
如果想手动控制最大宽度，又想保持比例准确，width 可以设为像素值，比如 width: 200，这样各阶段宽度按 value 比例缩放就不会出现比例错乱的问题。