Apexcharts：如何将鼠标悬停系列标签时其他系列透明度调至5%

要实现鼠标悬停系列标签时，其他系列透明度降到5%的需求，你可以通过监听Apexcharts的图例事件，动态修改系列的透明度来完成，具体步骤如下：

核心实现思路 #

利用Apexcharts提供的legendItemMouseEnter和legendItemMouseLeave事件，分别在鼠标进入/离开图例标签时调整系列透明度：

• 鼠标进入目标图例时，将非目标系列的透明度设为0.05（即5%），目标系列保持完全不透明
• 鼠标离开图例时，恢复所有系列的透明度为初始状态

代码示例（React版本） #

import React from 'react';
import ReactApexChart from 'react-apexcharts';

const HeatmapChart = () => {
  const chartOptions = {
    chart: {
      type: 'heatmap',
      events: {
        // 鼠标悬停到图例标签时触发
        legendItemMouseEnter: (event, chartContext, config) => {
          const targetIndex = config.seriesIndex;
          // 遍历所有系列，调整透明度
          chartContext.series.forEach((series, index) => {
            series.opacity(index === targetIndex ? 1 : 0.05);
          });
          // 重新渲染图表让变化生效
          chartContext.render();
        },
        // 鼠标离开图例标签时恢复透明度
        legendItemMouseLeave: (event, chartContext) => {
          chartContext.series.forEach(series => {
            series.opacity(1);
          });
          chartContext.render();
        }
      }
    },
    // 以下是你的原有配置，根据实际需求调整
    series: [
      {
        name: '系列1',
        data: [...]
      },
      {
        name: '系列2',
        data: [...]
      },
      // 更多系列...
    ],
    xaxis: {
      categories: [...]
    },
    yaxis: {
      categories: [...]
    },
    tooltip: {
      // 保持tooltip的正常配置
    }
  };

  return (
    <ReactApexChart
      options={chartOptions}
      series={chartOptions.series}
      type="heatmap"
      height={400}
    />
  );
};

export default HeatmapChart;

关键说明 #

• legendItemMouseEnter事件中的config.seriesIndex能获取当前悬停的系列索引，以此区分目标系列和其他系列
• series.opacity(value)方法用于设置单个系列的透明度，取值范围是0（完全透明）到1（完全不透明）
• 每次修改透明度后必须调用chartContext.render()，才能让变化实时生效

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