Echarts源码修改_漏斗图梯形改矩形

Echarts漏斗图原效果

这是Echarts中实现的funnel图的效果：

可以看到，除了最后一个块是三角形，其他的块都是梯形。

目标效果

我想要得到的效果是每一块都像这样是矩形的。

解决方案

1. 首先想到是在官方文档里找答案。

看看有没有相关的参数可以修改来完成这种效果。但是很可惜，只找到了一种方法让最下面的三角形也变成梯形，没能找到让梯形变成矩形的参数。
关于让三角形变成梯形，只需要在funnel图的series里设置minSize参数就可以了，默认为0%，需要把它设置成不为0%。

于是第一种方案宣告失败。

2. 如此，只能通过修改源代码来实现了。

找到echarts的目录，进入lib-chart-funnel，里面有四个.js文件，一个一个看看，最终确定要修改的东西应该是在funnelLayout.js中，锁定377开始的几行代码：

var start = getLinePoints(idx, y);
var end = getLinePoints(nextIdx, y + height);
y += height + gap;
data.setItemLayout(idx, {
 points: start.concat(end.slice().reverse())
});

很明显，idx、y和nextIdx、y+height分别是两个点的横坐标、纵坐标，就是这两个点影响了梯形的形状。经过测试，只要更改nextIdx为idx就可以把梯形变成矩形。
修改后代码：

var start = getLinePoints(idx, y);
var end = getLinePoints(idx, y + height);
y += height + gap;
data.setItemLayout(idx, {
 points: start.concat(end.slice().reverse())
});

成功！