Echart custom renderItem() optimalizations

I am creating event graph with hundred thousand of events and i want them to be rendered as lines in time using echarts.

Currently,I am rendering this like chart type: ‘custom’, with renderItem() function that simply put small rect on position.

function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var shape;
    var style;

    var start = api.coord([api.value(1), categoryIndex]); // get element position
    var height = api.size([0, 1])[1] * 0.6; //calculate element height
    style = api.style({fill:this.data.colors[categoryIndex]}); // get color in the category

    //create dimensions
    shape = {
        x: start[0]-1,
        y: start[1] - height / 2,
        width: 2,
        height:  height ,
      }
    //return shape
    return (
      shape && {
        type: 'rect',
        shape: shape,
        style: style
      }
    );
};

But this aproche is relatively slow.
Viedo example of loading

Can i somehaw fasten this process by optimalizations?

I think about grouping the little rerctangles to a bigger one if they are overlaping.
But i dont know where to start.
Becouse it renders one item at time i cant figured out haw to optimalize it.

Any opinion or speculation or help would be welcomed.