Apache echarts - 时间表样式图表布局

Question

有谁知道功能类似于时间表/时间线的图表布局？

我目前有一张图表，显示 3 个阀门随时间的开/关状态。 这是一个堆叠的线/面积图，它工作正常，但它不是最容易遵循的。

请参阅我想要实现的链接截图：图表实际与期望（顶部是当前图表，底部是我想要实现的）。

apache echarts可以做到这一点吗？

Answer 1

感谢@pthomson 为我指明了正确的方向。

这是我想出的： Codepen 图表示例

我仍然对 xAxis 的最小/最大值有一些问题。 最小值/最大值似乎是根据索引 1 中的值计算的，这是每个时间表片段的结束时间戳，因此并不理想。

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};

var option;


const valveColors = [
    "#f59527",
    "#00e200",
    "#2da8f3",
]

var data = [
  {
      "name": "Valve 1",
      "value": [
          1655647200000,
          1657980000000,
          0
      ]
  },
  {
      "name": "Valve 3",
      "value": [
          1657980000000,
          1659448800000,
          2
      ]
  },
  {
      "name": "Valve 1",
      "value": [
          1659448800000,
          1660526144467,
          0
      ]
  },
  {
      "name": "Valve 2",
      "value": [
          1655647200000,
          1660526144467,
          1
      ]
  }
];

option = {
            xAxis: {
                type: "time",
        //Min is getting values from index 1, not sure why
                min: range => range.min - (7 * 24 * 60 * 60 * 1000), //Subtract 7 days
            },
            yAxis: {
                type: "category",
                data: [ "Valve 3", "Valve 2", "Valve 1" ]
            },
            series: [
                {
                    type: "custom",
                    renderItem: (params, api) => {
                        var catIndex = api.value(2);
                        var timeSpan = [api.value(0), api.value(1)];
                        var start = api.coord([timeSpan[0], 2 - catIndex]);
                        var end = api.coord([timeSpan[1], 2 -catIndex]);
                        var size = api.size([0,1]);
                        var height = size[1] * 0.6;
                        var rect = 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 (
                            rect && {
                                type: "rect",
                                transition: ["shape"],
                                shape: rect,
                                style: {
                                    fill: valveColors[catIndex],
                                },
                            }
                        );
                    },
                    encode: {
                        x: [0,1],
                        y: 0,
                    },
                    data: data,
                }
            ],
            tooltip: {
                show: true,
                trigger: "item",
                formatter: params => {
                    return `${params.data.name}<br/> ${params.data.value[0]} - ${params.data.value[1]}` //Unix timestamps should be converted to readable dates
                }
            },
            dataZoom: [
                {
                    type: "slider",
                    filterMode: "none"
                },
            ],
        }

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);