Echarts在线免费图表

 
            var categories = ['categoryA', 'categoryB'];

const xData = ["2022-02-14", "2022-02-15", "2022-02-16", "2022-02-17", "2022-02-18", "2022-02-21", "2022-02-22"]
const yData = [
    [0, "2022-02-15", "2022-02-17"],
    [0, "2022-02-18", "2022-02-22"],
    [1, "2022-02-15", "2022-02-16"],
]

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: {},
    xAxis: {
        data: xData,
        boundaryGap: false
    },
    yAxis: {
        data: categories
    },
    series: [{
        type: 'custom',
        renderItem,
        itemStyle: {
            opacity: 0.8
        },
        encode: {
            x: [1, 2],
            y: 0
        },
        data: yData
    }]
};