在ECharts实现类Chrome DevTools时间图表及解决有效宽度计算问题

问题1：ECharts实现该图表的最优方式 #

• 首选自定义系列（custom series），这是最适配的方案。自定义系列通过renderItem函数直接控制图形绘制，不需要像瀑布图那样创建透明堆叠的阴影系列。
• 把y轴设为category类型，每个类目对应集群中的一台机器；每个时间跨度矩形通过renderItem里的rect元素绘制，直接用x轴的时间数值计算左右边界，y轴类目索引确定垂直位置，完全无需额外的坐标转换。
• 相比用scatter的symbol模拟矩形，自定义系列能直接处理时间的起始和结束节点，避免像素单位转换带来的精度问题，逻辑更清晰。

问题2：解决有效宽度与缩放精度问题 #

• 放弃硬编码宽度和手动计算zoomScale的方式，直接借助ECharts自定义系列的api.coord方法完成坐标转换，缩放时会自动更新，无需手动维护缩放比例：

  renderItem(params, api) {
    // 获取时间起始和结束的像素位置
    const startPos = api.coord([api.value(0), api.value(1)]);
    const endPos = api.coord([api.value(0) + api.value(2), api.value(1)]);
    // 获取每行的高度（预留20%间隙避免行重叠）
    const rowHeight = api.size([0, 1])[1] * 0.8;
  
    return {
      type: 'rect',
      shape: {
        x: Math.min(startPos[0], endPos[0]),
        y: startPos[1] - rowHeight / 2,
        width: Math.abs(endPos[0] - startPos[0]) - 2, // 预留2px间隙避免同时间块重叠
        height: rowHeight
      },
      style: api.style()
    };
  }
  

• 确保x轴设置为time类型，y轴为category类型，让ECharts自动处理时间数据的解析与坐标系映射，彻底解决缩放时转换失效、矩形重叠的问题。

内容的提问来源于stack exchange，提问作者Revin