echart 甘特图问题，求求大佬们帮忙看看

[nate375]

我对 echart 并不是很了解，由于项目需要，被赶鸭子上架，请问大佬们，为什么这里不能写成 baseTime += 64 * 1000 * 60 呢，测试必须要是小时的整数倍才能画出图。

// @ts-ignore Date.prototype.Format = function(fmt) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "H+": this.getHours(), "m+": this.getMinutes(), "s+": this.getSeconds(), "S+": this.getMilliseconds() }; //因为 date.getFullYear()出来的结果是 number 类型的,所以为了让结果变成字符串型，下面有两种方法： if (/(y+)/.test(fmt)) { //第一种：利用字符串连接符“+”给 date.getFullYear()+""，加一个空字符串便可以将 number 类型转换成字符串。 fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { //第二种：使用 String()类型进行强制数据类型转换 String(date.getFullYear())，这种更容易理解。 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(String(o[k]).length))); } } return fmt; }

function formart(date) { const d = date ? new Date(date) : new Date(); // @ts-ignore // return d.Format("HH:mm:ss"); return d.Format("HH:mm"); }

//const day = 1000 * 60 * 60 * 24;

var data = [];

var dataCount = 10; var types = [{ name: 'JS Heap', color: '#7b9ce1' } ];

var categories = [ 'categoryA' ];

var today = new Date(); today.setHours(0); today.setMinutes(0); today.setSeconds(0); today.setMilliseconds(0); //console.log(today.getTime()); // var startTime=+new Date(this.formart(today.getTime())); var startTime = today.getTime();

// Generate mock data // @ts-ignore echarts.util.each(categories, function(category, index) {

for (var i = 0; i < 1; i++) {
    var typeItem = types[Math.round(Math.random() * (types.length - 1))];
    // var duration = 3600000;
        var baseTime = startTime;
     var duration = 1;
    data.push({
        name: typeItem.name,
        value: [
            index,
            baseTime,
            baseTime += 60 * 1000 * 60,
            duration
        ],
        itemStyle: {
            normal: {
                color: typeItem.color
            }
        }
    });
    // baseTime += (day * (Math.random() * 3 | 0))
}

});

data.forEach((item, index) => { item.value[1] = formart(item.value[1]) //'2019-08-0' + (6 + index + 1) item.value[2] = formart(item.value[2]) //'2019-08-0' + (6 + index + 2) })

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;

debugger

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


const result = rectShape && {
    type: 'rect',
    shape: rectShape,
    style: api.style(),
    styleEmphasis: {
        textStroke: null
    }
};

result.style.text = "sdfdsaf"
result.style.textFill = '#000'
result.style.textStroke = null
// result.style.textOffset = [0, -10]
result.style.textPosition = 'top'
return result

}

option = { tooltip: { formatter: function(params) { return params.marker + params.name + ': ' + params.value[3] + ' ms'; } }, title: { text: 'Profile', left: 'center' },

xAxis: {
    boundaryGap: false,
    data: Array(24).fill(0).map((item, index) => {
        return formart(startTime + 1000 * 60 * 60 * index)
    })
},
yAxis: {
    data: categories
},
series: [{
    precision: '2',
    type: 'custom',
    renderItem: renderItem,
    itemStyle: {
        normal: {
            opacity: 0.8
        }
    },
    encode: {
        x: [1, 2],
        y: 0
    },
    data: data
}]

};