echart 实现甘特图，并在type上添加上类别名标签

var data = [];
var dataCount = 10;
var startTime = +new Date();
var categories = [‘categoryA‘, ‘categoryB‘, ‘categoryC‘];
var types = [
    {name: ‘JS ‘, color: ‘#7b9ce1‘},
    {name: ‘Do‘, color: ‘#bd6d6c‘},
    {name: ‘No‘, color: ‘#75d874‘},
    {name: ‘Li‘, color: ‘#e0bc78‘},
    {name: ‘CPU‘, 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
                }
            }
        });
        
    }
});

//自定义图形
function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = api.size([0, 1])[1] * 0.6;

    var rectShape = 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
    });

    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‘;
        }
    },
   
    textStyle: {
            fontSize: 40,
            color: ‘#FFF‘,//文字颜色
            fontWeight: "bold"
                },
    title: {
        text: ‘Profile‘,
        left: ‘center‘,
        show:false
    },
    dataZoom: [{
        type: ‘slider‘,
        filterMode: ‘weakFilter‘,
        showDataShadow: false,
        top: 10,
        labelFormatter: ‘‘,
        show:false,
        enabled:false
    }, {
        type: ‘inside‘,
        filterMode: ‘weakFilter‘
    }],
    grid: {
        height: 300
    },
    xAxis: {
        min: startTime,
        scale: true,
        show:false,
        axisLabel: {
            formatter: function (val) {
                return Math.max(0, val - startTime) + ‘ ms‘;
            }
        },
        axisLine:{show:false},
        
    },
    yAxis: {
        splitLine:{show:false},
        axisTick:{show:false},//Y轴间距线
        axisLine:{show:false},//Y 轴线
        data: categories,
        //color:‘#FFF‘
    },
    series: [{
        type: ‘custom‘,
        renderItem: renderItem,
        itemStyle: {
            opacity: 0.8
        },
        encode: {
            x: [1, 2],
            y: 0
        },
        data:data,
         label: {
                show: true,
                formatter:function (params) {
                    return  params.name ;//返回type名
                },
                textStyle:{
                    fontSize:1,
                    shadowBlur:false,
                    color: ‘#FFF‘,//文字颜色
                }
            },
    }]
};