ECharts 线条系列自定义工具提示将一些线条分组在一起并相应地显示工具提示数据？

Question

我正在使用 ECharts Line 系列来绘制某种距离-时间图，其中 x 轴是时间（时间），y 轴是位置（分类）。

在我的系列中，我有多行。因此，这是一组对象，每个对象对应一个“系列线”。

假设我有 6 条线路，行驶相同的路线，只是从不同的时间出发。

在每个给定的 y 值（位置），如果我将 tooltip.type 设置为“axis”，工具提示上将显示 6 个值，对应于该位置处 6 个图形的所有时间。

但是，我不希望所有值都显示在工具提示上。将 tooltip.type 设置为“item”只会显示我悬停的数据点，这也不是我想要的。

我希望它基于我悬停的内容，例如在系列 2 的位置 B 处，工具提示将显示系列 2 和系列 4 在位置 B 的时间，因为它们属于同一类型“汽车”，假设类型是数据的一部分。

有什么办法可以做到吗？我已经在这个问题上呆了很长时间了，似乎找不到解决方案。 我已经设法使用鼠标悬停事件根据类型手动“突出显示”行，但似乎无法更改工具提示。

有关更多信息，我的工具提示配置是

tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } } 

我也尝试使用格式化程序，但是根据参数，我如何知道我悬停在哪个系列上？

Params 将始终返回所有系列的数据点。

Answer 1

如果您使用

trigger: 'item'

作为工具提示，您可以在 formatter 函数中从数据中过滤出您想要的所有内容。

示例：

const data = [
  { x: 100, y: 'A', cat: 1, type: 'car'},
  { x: 200, y: 'B', cat: 1, type: 'car' },
  { x: 600, y: 'C', cat: 1, type: 'car' },
  { x: 200, y: 'A', cat: 2, type: 'plane' },
  { x: 400, y: 'B', cat: 2, type: 'plane' },
  { x: 500, y: 'C', cat: 2, type: 'plane' },
  { x: 400, y: 'A', cat: 3, type: 'car' },
  { x: 500, y: 'B', cat: 3, type: 'car' },
  { x: 700, y: 'C', cat: 3, type: 'car' }
];

option = {
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'category'
  },
  tooltip: {
    formatter: (params) => {
      let items = data.filter(item => item.y === params.data[1] && item.type === params.data[3]);
      return items.map(item => item.x + ' ' + item.y + ' ' + item.type).join('<br>');
    }
  },
  series: [
    {
      type: 'line',
      data: data.filter(item => item.cat === 1).map(item => [item.x, item.y, item.cat, item.type])
    },
    {
      type: 'line',
      data: data.filter(item => item.cat === 2).map(item => [item.x, item.y, item.cat, item.type])
    },
    {
      type: 'line',
      data: data.filter(item => item.cat === 3).map(item => [item.x, item.y, item.cat, item.type])
    }
  ]
};