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

测试链接：

https://echarts.apache.org/examples/zh/editor.html?c=custom-profile

 

操作方法，将下述代码copy到编辑窗口，即可进行相应测试。

 

 

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',//文字颜色
                }
            },
    }]
};

 

 

由于需求中不同类别插入数据数量不同，于是对其进行了如下修改，将categories中的每一个categorie赋值一个array,然后将所有array添加到一个二维数组中，在 add data中以categories中的index来取出每一个categorie的arry,详细代码如下：

var data = [];

var dataCount = 10;

var startTime = +new Date();
var categories = ['Dryer', 'Forming', 'Bath'];
var types = [
        { name: 'JS ', color: '#7b9ce1',val:30 },
        { name: 'Do', color: '#bd6d6c',val:40 },
        { name: 'No', color: '#75d874',val:50 },
        { name: 'Li', color: '#e0bc78',val:60 },
        { name: 'CPU', color: '#dc77dc',val:70 },
        { name: 'GPU', color: '#72b362',val:80 }
];

var typesF = [
        { name: 'Do', color: '#bd6d6c',val:40 },
        { name: 'No', color: '#75d874',val:50 },
        { name: 'CPU', color: '#dc77dc',val:70 },
        { name: 'GPU', color: '#72b362',val:80 }
];
var typesB = [
        { name: 'JS ', color: '#7b9ce1',val:30 },
        { name: 'No', color: '#75d874',val:50 },
        { name: 'Li', color: '#e0bc78',val:60 },
        { name: 'CPU', color: '#dc77dc',val:70 },
        { name: 'GPU', color: '#72b362',val:80 }
];

var ds =[];//ds=new array();
ds[0] = types;
ds[1] = typesF;
ds[2] = typesB;

// add data
categories.forEach(function (category, index) {
    var baseTime = startTime;
    var dsItem=ds[index];
    
    for (var i = 0; i < dsItem.length; i++) {
    //    var typeItem = types[Math.round(Math.random() * (types.length - 1))];
        var typeItem = dsItem[i];
    //    var duration = Math.round(Math.random() * 10000);
        data.push({
            name: typeItem.name,
            value: [
                index,
                baseTime,
                baseTime += typeItem.val*100000,//*100000是为了避免值太小时，前次刷新与后 次刷新若数据相同，但前端相应色块的长度有明显变化；*100000后此问题即可解决
                typeItem.val*100000
            ],
            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',//文字颜色
                }
            },
    }]
};

上述代码效果如下：