在echarts的自定义系列中添加条形间隙

Question

我在尝试让自定义系列 eChart 中的条形图不重叠时遇到了一些困难，请参见下面的屏幕截图。

我在这里添加的数据之间都有几秒到一分钟，例如，在第一行，实际上有 2x 橙色条重叠，由于时间流逝：

开始 - 12:05 结束 - 12:15

和

开始 - 12:15 结束 - 12:45

这与剪裁有关，不幸的是，各种尝试让它发挥作用，都没有结果。

这是一个在 x 轴上渲染项目的示例：

const index = api.value(0);
const start = api.coord([api.value(7), index]);
const end = api.coord([api.value(6), index]);

const coordsys = params.coordSys;
this.cartesianXBounds[0] = coordsys.x;
this.cartesianXBounds[1] = coordsys.x + coordsys.width;
this.cartesianYBounds[0] = coordsys.y;
this.cartesianYBounds[1] = coordsys.y + coordsys.height;

const barlength = end[0] = start[0];

const barheight = api.size([0, 1])[1] * 0.6;

const x = start[0];
const y = start[1] - barheight;

const rectNormal = this.clipRectByRect(params, {
  x,
  y,
  width: barlength,
  height: barheight
});

Answer 1

如果您添加间隙，它将影响柱线并从实际位置移动到位置 + 间隙。截图不包含坐标轴，如果正确的话，在真实图表上你有相同的，那么只是在它们之间添加透明的微条。

您还可以查看official example：在 #35 行的 BaseTime（条形长度）增加随机值以实现间隙。如果您尝试消除条形仍然不会重叠的随机间隙，请将此作为参考，首先检查您的数据，然后检查您的绘图功能。

附：如果start - 12:05 end - 12:15 和start - 12:15 end - 12:45 在同一时间线上，那就错了。第二个小节应该从 12:16 开始，或者第一个应该在 12:14 结束，否则您将重叠 1 秒。