Issue when use renderItem for Custom Series

Version

5.1.1

Steps to reproduce

I use example at link : https://echarts.apache.org/examples/en/editor.html?c=custom-profile end edit with purpose exchange xaxis and yaxis. I only edit xaxis, yaxis, Endcode and renderItem:

var data = [];
var dataCount = 10;
var startTime =  new Date();
var categories = ['categoryA', 'categoryB', 'categoryC'];
var types = [
    {name: 'JS Heap', color: '#7b9ce1'},
    {name: 'Documents', color: '#bd6d6c'},
    {name: 'Nodes', color: '#75d874'},
    {name: 'Listeners', color: '#e0bc78'},
    {name: 'GPU Memory', color: '#dc77dc'},
    {name: 'GPU', color: '#72b362'}
];

// Generate mock data
categories.forEach(function (category, index) {
    var baseTime = startTime;
    for (var i = 0; i < dataCount; i  ) {
        var typeItem = types[Math.round(Math.random() * (types.length - 1))];
        var duration = Math.round(Math.random() * 10000);
        data.push({
            name: typeItem.name,
            value: [
                index,
                baseTime,
                baseTime  = duration,
                duration
            ],
            itemStyle: {
                normal: {
                    color: typeItem.color
                }
            }
        });
        baseTime  = Math.round(Math.random() * 2000);
    }
});

function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([ categoryIndex,api.value(1),]);
    var end = api.coord([ categoryIndex,api.value(2),]);
    var width = api.size([0, 1])[0] * 0.8;

    var rectShape = echarts.graphic.clipRectByRect({
        x: start[0] - width/2,
        y: start[1] ,
        width: width,
        height: end[1] - start[1]
    }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
    });

    return rectShape && {
        type: 'rect',
        transition: ['shape'],
        shape: rectShape,
        style: api.style()
    };
}

option = {
    tooltip: {
        formatter: function (params) {
            return params.marker   params.name   ': '   params.value[3]   ' ms';
        }
    },
    title: {
        text: 'Profile',
        left: 'center'
    },
    dataZoom: [{
        type: 'slider',
        filterMode: 'weakFilter',
        showDataShadow: false,
        top: 400,
        labelFormatter: ''
    }, {
        type: 'inside',
        filterMode: 'weakFilter'
    }],
    grid: {
        height: 300
    },
    xAxis: {
        data: categories
    },
    yAxis: {
        min: startTime,
        scale: true,
        axisLabel: {
            formatter: function (val) {
                return Math.max(0, val - startTime)   ' ms';
            }
        }
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {
            opacity: 0.8
        },
        encode: {
            y: [1, 2],
            x: 0
        },
        data: data
    }]
};

What is expected?

Chart will render on vertical

What is actually happening?

Chart is not rendered

[pissang]

Why the + character in your code are all missing?

[echarts-bot[bot]]

@Tuanlt17 Please provide a minimum reproducible demo for the issue either with https://codepen.io/Ovilia/pen/dyYWXWM , https://www.makeapie.com/editor.html or https://codesandbox.io/s/mystifying-bash-2uthz.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.