function setChart(cdata) {
    var data = [];
    var color = '#14B4C2'; //填充颜色
    var emphasisColor = '#1AF4B8'; //鼠标滑入颜色
    for (var i = 0; i < cdata.length; i++) {
        data.push({
            value: [
                0,
                cdata[i].startTime,
                cdata[i].endTime,
                cdata[i].endTime - cdata[i].startTime
            ],
            itemStyle: {
                normal: {
                    color: color
                },
                emphasis: {
                    color: emphasisColor
                }
            }
        });
    }
    //params：包含了当前数据信息和坐标系的信息
    //api：是一些开发者可调用的方法集合，api.value(...)：意思是取出 dataItem 中的数值，api.coord(...)：意思是进行坐标转换计算
    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.7;

        return {
            type: 'rect',
            shape: 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
            }),
            style: api.style(),
            styleEmphasis: api.styleEmphasis()
        };
    }

    var option = {
        grid: {
            height: 30,
            top: 15,
            left: 35,
            bottom: 0,
            right: 35
        },
        tooltip: {
            show: true,
            formatter: function (value, index) {
                return '起：' + getDate(value.value[1]) + '<br/>' + '止：' +getDate(value.value[2]);
//              return '起：' + moment(value.value[1]).format('MM-DD HH:mm:ss') + '<br/>' + '止：' + moment(value.value[2]).format('MM-DD HH:mm:ss');
            }
        },
        xAxis: {
            type: 'time',
            axisLabel: {
                show: true,
                textStyle: {color: '#396386'},
                formatter: function (value, index) {
                    //return moment(value).format('HH:mm').split(' ')[0]}
                    var value = getDate(value);
                    return value.split(' ')[0].substr(5) + '\n' + value.split(' ')[1];
                }
            },
            axisLine: {lineStyle: {color: '#265d7f'}}, //x轴的颜色
            axisTick: {lineStyle: {color: '#265d7f'}, alignWithLabel: true},
            splitNumber: 17,
            splitLine: {show: false}
        },
        yAxis: {
            data: 'd',
            axisLabel: {show: false},
            axisLine: {show: false},
            axisTick: {show: false},
            splitLine: {
                show: true,
                lineStyle: {color: '#265d7f'}
            }
        },
        series: [{
            type: 'custom',
            renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            encode: {
                x: [1, 2],
                y: 0
            },
            data: data
        }]
    };
    
    myChart = echarts.init(document.getElementById('lastRect'));
    myChart.setOption(option);
    window.onresize=myChart.resize;

}

setChart([{startTime: 1543647087349, endTime: 1543648887000}]);//初始化时间条

搜索