利用custom类型图标实现甘特图，图例无法显示echarts custom配置项内容和展示

我用custom想做一个甘特图，代码是我按官方范例自己改的一个demo,但是图例一直显示不出来，请大神指导

      var data = [[10, 16, "TEST", 'A',1], [16, 18, "TEST", 'B',1], [18, 26, "TEST", 'C',1], [26, 32, "TEST", 'D',1], [32, 56, "TEST", 'E',1], [56, 62, "TEST", 'F',1]];
var data1 = [[10, 16, "TEST1", 'A',2], [12, 18, "TEST1", 'B',2], [18, 26, "TEST1", 'C',2], [26, 32, "TEST1", 'D',2], [32, 56, "TEST1", 'E',2], [56, 62, "TEST1", 'F',2]];
var data2 = [[10, 16, "TEST", 'A',1], [16, 18, "TEST", 'B',1], [18, 26, "TEST", 'C',1], [26, 32, "TEST", 'D',1], [32, 56, "TEST", 'E',1], [56, 62, "TEST", 'F',1]];
var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];

data = echarts.util.map(data, function (item, index) {
    return {
        value: item,
        itemStyle: {
            normal: {
                color: colorList[index]
            }
        }
    };
});
data1 = echarts.util.map(data1, function (item, index) {
    return {
        value: item,
        itemStyle: {
            normal: {
                color: colorList[index]
            }
        }
    };
});

function renderItem(params, api) {
    var yValue = api.value(2);
    var start = api.coord([api.value(0), yValue]);
    var size = api.size([api.value(1) - api.value(0), 1]);
    var style = api.style();

    return {
        type: 'rect',
        shape: {
            x: start[0],
            y: start[1],
            width: size[0],
            height: 50
        },
        style: style
    };
}

option = {
    legend: {
        zlevel: 99,
        type: 'scroll',
        bottom: 110,
        left:50,
        data: (function (){
            var list = [];
            for (var i = 0; i <data2.length; i++) {
                list.push(data2[i][3]);
            }
            return list;
        })()
    },
    title: {
        text: '件数工时连续甘特图',
        left: 10
    },
    tooltip: {
    },
    xAxis: {
        scale: true
    },
    yAxis: {
        type: "category"
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
        dimensions: ['from', 'to', 'profit'],
        encode: {
            x: [0, 1],
            tooltip: [0, 1, 2],
            itemName: 3
        },
        data: data
    },{
        type: 'custom',
        renderItem: renderItem,
        label: {
            normal: {
                show: true,
                position: 'top'
            }
        },
        dimensions: ['from', 'to', 'profit'],
        encode: {
            x: [0, 1],
            tooltip: [0, 1, 2],
            itemName: 3
        },
        data: data1
    }]
};