在echarts中的自定义系列中添加bar gaps

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

如果您添加缺口，它将影响柱线并从实际位置移动到位置 + 缺口。屏幕截图不包含轴，如果它是正确的，并且在真实图表上你有相同的轴，那么只需在两者之间添加透明 micro-bar。

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

P.S。如果 start - 12:05 end - 12:15 和 start - 12:15 end - 12:45 在同一个时间线上，那么它是错误的。第二个小节应该从 12:16 开始，或者第一个小节应该在 12:14 结束，否则你会重叠 1 秒。

在echarts中的自定义系列中添加bar gaps

Adding bar gaps in a custom series in echarts

typescript

echarts