echarts甘特图 一个值多条线

 先看图

 

这里我们用到的是 series ：type:custom  自定义，但是这里我遇到一个问题，就是不过你在series里push多少数据，图表上显示的都是在同一水平线，用了好多方法都不好使，

renderItem: (params, api) => {
                //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                var end = api.coord([api.value(2), categoryIndex]);

                var height = 10;
                return {
                    type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                    shape: echarts.graphic.clipRectByRect(
                        {
                            // 矩形的位置和大小。
                            x: start[0],
                            y: start[1] - height / 2,
                            width: end[0] - start[0],
                            height: height,
                        },
                        {
                            // 当前坐标系的包围盒。
                            x: params.coordSys.x,
                            y: params.coordSys.y,
                            width: params.coordSys.width,
                            height: params.coordSys.height,
                        }
                    ),
                    style: api.style(),
                };
            },

图： 重叠在一起 ，

 最后用了最后使用了里面renderItem 返回的 y轴定位解决的（有好的方法可以和我说）。

renderItem: (params, api) => {
                //开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
                var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
                var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
                var end = api.coord([api.value(2), categoryIndex]);

                var height = 10;
                return {
                    type: "rect", // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
                    y:10,
                    shape: echarts.graphic.clipRectByRect(
                        {
                            // 矩形的位置和大小。
                            x: start[0],
                            y: start[1] - height / 2,
                            width: end[0] - start[0],
                            height: height,
                        },
                        {
                            // 当前坐标系的包围盒。
                            x: params.coordSys.x,
                            y: params.coordSys.y,
                            width: params.coordSys.width,
                            height: params.coordSys.height,
                        }
                    ),
                    style: api.style(),
                };
            },

全部代码