ECharts — это мощная библиотека диаграмм JavaScript, предоставляющая широкий спектр интерактивных визуализаций. Одним из распространенных требований при работе с ECharts является выборочное скрытие определенных данных рядов из всплывающей подсказки. В этой статье мы рассмотрим пять различных способов достижения этой цели, а также приведем примеры кода.

Метод 1: использование свойства «tooltip.trigger».
Самый простой способ скрыть серию из всплывающей подсказки — установить для свойства tooltip.triggerзначение 'none'для именно этот сериал. Вот пример:

option = {
  // ... other chart configuration options ...
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      name: 'Series 1',
      type: 'line',
      data: [/* series data */]
      // ... other series options ...
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [/* series data */],
      tooltip: {
        trigger: 'none' // Hide this series from the tooltip
      }
// ... other series options ...
    }
  ]
};

Метод 2: использование функции «tooltip.formatter».
Другой подход — настроить всплывающую подсказку с помощью функции tooltip.formatter. Внутри функции вы можете проверить имя серии и вернуть пустую строку для серии, которую хотите скрыть:

option = {
  // ... other chart configuration options ...
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      var seriesName = params[0].seriesName;
      if (seriesName === 'Series 2') {
        return ''; // Hide the tooltip for 'Series 2'
      }
// ... other tooltip formatting logic ...
    }
  },
  series: [
    {
      name: 'Series 1',
      type: 'line',
      data: [/* series data */]
      // ... other series options ...
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [/* series data */]
      // ... other series options ...
    }
  ]
};

Метод 3: использование свойства «tooltip.extraCssText».
Вы также можете скрыть серию из всплывающей подсказки, применив к этой серии стиль CSS. Установите свойство tooltip.extraCssTextдля серии, чтобы скрыть ее всплывающую подсказку:

option = {
  // ... other chart configuration options ...
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      name: 'Series 1',
      type: 'line',
      data: [/* series data */]
      // ... other series options ...
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [/* series data */],
      tooltip: {
        extraCssText: 'display: none;' // Hide the tooltip for this series
      }
// ... other series options ...
    }
  ]
};

Метод 4: использование свойства “tooltip.confine”
Установив для свойства tooltip.confineзначение true, вы можете ограничить отображение всплывающей подсказки только внутри область диаграммы. Это эффективно скрывает всплывающую подсказку для рядов, расположенных за пределами области диаграммы.

option = {
  // ... other chart configuration options ...
  tooltip: {
    trigger: 'axis',
    confine: true // Restrict tooltip within the chart area
  },
  series: [
    {
      name: 'Series 1',
      type: 'line',
      data: [/* series data */]
      // ... other series options ...
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [/* series data */],
      // ... other series options ...
    }
  ]
};

Метод 5: использование невидимых точек данных.
В этом методе вы можете сделать ряд невидимым, установив для его точек данных значение NaNили null. В результате серия не будет отображаться во всплывающей подсказке.

option = {
  // ... other chart configuration options ...
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      name: 'Series 1',
      type: 'line',
      data: [/* series data */]
      // ... other series options ...
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [NaN, NaN, NaN, NaN, NaN], // Hide this series from the tooltip
      // ... other series options ...
    }
  ]
};

В этой статье мы рассмотрели пять различных способов скрыть данные рядов из всплывающей подсказки в ECharts. Вы можете выбрать метод, который лучше всего соответствует вашим требованиям, и реализовать его в своих проектах. Выборочно скрывая данные серии из всплывающей подсказки, вы можете предоставить своим пользователям более целенаправленную и оптимизированную визуализацию, улучшая общий пользовательский опыт.