echarts 横向阶梯图（进度图）

实现效果:

echarts代码:

option = {
  tooltip: {
    show:true,
      trigger: 'axis',
      axisPointer: {  
              type: 'shadow'
      },
    },
    title: {
        text: '自定义1柱状图示例',
    },
    xAxis: {
        type: 'time',
    },
    yAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D'],
    },
    series: [
        {
            name: '时间段',
            type: 'custom',
            renderItem: renderItem,
            encode: {
                x: [0, 1],
                y: 2,
                tooltip: [0, 1, 2],
                itemName: 3
              },
            data: [
                { value: [new Date('2023-11-06 08:00'), new Date('2023-11-06 09:00'), 'A', 50], color: 'blue' },
                { value: [new Date('2023-11-06 09:00'), new Date('2023-11-06 10:00'), 'B', 80], color: 'blue' },
                { value: [new Date('2023-11-06 10:00'), new Date('2023-11-06 11:00'), 'C', 30], color: 'blue' },
                { value: [new Date('2023-11-06 11:00'), new Date('2023-11-06 12:00'), 'D', 30], color: 'blue' },
            ],
        },
    ],
};

// 自定义渲染函数
function renderItem(params, api) {
    var categoryIndex = api.value(2);
    var start = api.coord([api.value(0), categoryIndex]);
    var end = api.coord([api.value(1), categoryIndex]);
    var width = end[0] - start[0];
    
    var percentage = api.value(3) / 100; // 获取百分比，范围为 0 到 1

    var color = 'blue'; // 默认颜色为蓝色

    var rectShape = {
        type: 'rect',
        shape: {
            x: start[0],
            y: start[1] - 10,
            width: width * percentage,
            height: 20,
        },
        style: {
          fill: color,
        },
    };

    var bgShape = {
        type: 'rect',
        shape: {
            x: start[0] + width * percentage,
            y: start[1] - 10,
            width: width * (1 - percentage),
            height: 20,
        },
        style: {
            fill: 'gray', // 背景色为灰色
        },
    };
    return {
    type: 'group',
    label: {
        show: true,
        position: 'top'
      },
    children: [rectShape, bgShape]
  }
}